Perf improvements cleanup (#4191)

Author: jusrhee

dashboard/src/assets/placeholder.svg

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import placeholder from "assets/placeholder.png";
+import placeholder from "assets/placeholder.svg";
 
 type Props = {
   children: React.ReactNode;
@@ -42,4 +42,13 @@ const StyledDashboardPlaceholder = styled.div<{
   border-radius: 10px;
   position: relative;
   overflow: hidden;
+  animation: fadeIn 0.5s;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;

dashboard/src/components/porter/DashboardPlaceholder.tsx

@@ -53,6 +53,7 @@ const Item = styled.div<{ active: boolean; activeColor?: string; inactiveColor?:
   cursor: pointer;
   justify-content: center;
   padding: 10px;
+  opacity: ${(props) => props.active ? "1" : "0.4"};
   background: ${(props) =>
     props.active ? props.activeColor ?? "#ffffff11" : props.inactiveColor ?? "transparent"};
 `;

dashboard/src/components/porter/Toggle.tsx

@@ -273,8 +273,6 @@ const Apps: React.FC = () => {
                 setSort("letter");
               }
             }}
-            inactiveColor={"#ffffff11"}
-            activeColor={"transparent"}
           />
           <Spacer inline x={1} />
           <Toggle
@@ -290,8 +288,6 @@ const Apps: React.FC = () => {
                 setView("list");
               }
             }}
-            inactiveColor={"#ffffff11"}
-            activeColor={"transparent"}
           />
           <Spacer inline x={2} />
           {currentDeploymentTarget?.is_preview ? (

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -157,15 +157,15 @@ const GithubActionModal: React.FC<Props> = ({
           <Select
             options={[
               {
-                label:
-                  "I authorize Porter to open a PR on my behalf (recommended)",
+                label: "I authorize Porter to open a PR on my behalf (recommended)",
                 value: "open_pr",
               },
               {
                 label: "I will copy the file into my repository myself",
                 value: "copy",
               },
             ]}
+            value={choice}
             setValue={(x: string) => {
               setChoice(x as Choice);
             }}