code caching: enabled/disabled UX for workflow run UI (#3497)

skyvern-frontend/src/components/AnimatedWave.tsx

@@ -1,9 +1,16 @@
 interface AnimatedWaveProps {
   text: string;
   className?: string;
+  duration?: string;
+  waveHeight?: string;
 }
 
-export function AnimatedWave({ text, className = "" }: AnimatedWaveProps) {
+export function AnimatedWave({
+  text,
+  className = "",
+  duration = "1.3s",
+  waveHeight = "4px",
+}: AnimatedWaveProps) {
   const characters = text.split("");
 
   return (
@@ -14,7 +21,7 @@ export function AnimatedWave({ text, className = "" }: AnimatedWaveProps) {
             transform: translateY(0px);
           }
           50% {
-            transform: translateY(-4px);
+            transform: translateY(-${waveHeight});
           }
         }
         .animate-wave {
@@ -28,7 +35,7 @@ export function AnimatedWave({ text, className = "" }: AnimatedWaveProps) {
             className="animate-wave inline-block"
             style={{
               animationDelay: `${index * 0.1}s`,
-              animationDuration: "1.3s",
+              animationDuration: duration,
               animationIterationCount: "infinite",
               animationTimingFunction: "ease-in-out",
             }}

skyvern-frontend/src/components/SwitchBarNavigation.tsx

@@ -4,6 +4,7 @@ import { NavLink, useSearchParams } from "react-router-dom";
 type Option = {
   label: string;
   to: string;
+  icon?: React.ReactNode;
 };
 
 type Props = {
@@ -23,13 +24,18 @@ function SwitchBarNavigation({ options }: Props) {
             key={option.to}
             className={({ isActive }) => {
               return cn(
-                "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+                "flex cursor-pointer items-center justify-center rounded-sm px-3 py-2 text-center hover:bg-slate-700",
                 {
                   "bg-slate-700": isActive,
                 },
               );
             }}
           >
+            {option.icon && (
+              <span className="mr-1 flex items-center justify-center">
+                {option.icon}
+              </span>
+            )}
             {option.label}
           </NavLink>
         );
@@ -38,4 +44,4 @@ function SwitchBarNavigation({ options }: Props) {
   );
 }
 
-export { SwitchBarNavigation };
+export { SwitchBarNavigation, type Option as SwitchBarNavigationOption };