Update the ApiManagerModal header with a breathing animation and status indicator

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.module.scss

@@ -40,24 +40,50 @@
     var(--transition-timing-function);
 }
 
-.title {
+.heading {
+  display: flex;
+  justify-content: space-between;
   font-weight: 500;
   font-size: 11px;
   font-weight: 600;
-  color: var(--vscode-textLink-foreground);
   text-transform: uppercase;
   display: flex;
   align-items: center;
   padding: 0 8px;
   height: 28px;
-  transform: translateY(3px);
-  transition: transform var(--transition-duration-250)
-    var(--transition-timing-function);
+  background-image: linear-gradient(
+    to right,
+    var(--cwc-bg-secondary),
+    var(--cwc-bg-secondary)
+  );
+  background-repeat: no-repeat;
+  background-size: 0% 100%;
+
+  > div {
+    transform: translateY(3px);
+    transition: transform var(--transition-duration-250)
+      var(--transition-timing-function);
+  }
 
-  &--scrolled {
-    transform: unset;
+  &__title {
+    color: var(--vscode-textLink-foreground);
+  }
+
+  &--scrolled > span {
     transform: translateY(1px);
   }
+
+  &--inhale {
+    animation: inhale 5s linear forwards;
+  }
+
+  &--exhale {
+    animation: exhale 5s linear forwards;
+  }
+
+  &__breathing-status {
+    color: var(--cwc-text-color-dimmed);
+  }
 }
 
 .requests-container {
@@ -175,3 +201,21 @@
     background: transparent;
   }
 }
+
+@keyframes inhale {
+  from {
+    background-size: 0% 100%;
+  }
+  to {
+    background-size: 100% 100%;
+  }
+}
+
+@keyframes exhale {
+  from {
+    background-size: 100% 100%;
+  }
+  to {
+    background-size: 0% 100%;
+  }
+}

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.tsx

@@ -31,6 +31,9 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
   const [now, set_now] = useState(Date.now())
   const [is_scrolled, set_is_scrolled] = useState(false)
   const [window_width, set_window_width] = useState(window.innerWidth)
+  const [breathing_state, set_breathing_state] = useState<'inhale' | 'exhale'>(
+    'inhale'
+  )
 
   useEffect(() => {
     const handle_resize = () => set_window_width(window.innerWidth)
@@ -47,6 +50,13 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
     return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      set_breathing_state((prev) => (prev === 'inhale' ? 'exhale' : 'inhale'))
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
   useEffect(() => {
     set_start_times((prev) => {
       const next = { ...prev }
@@ -82,11 +92,16 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
     >
       <div className={styles.container}>
         <div
-          className={cn(styles.title, {
-            [styles['title--scrolled']]: is_scrolled
+          className={cn(styles.heading, {
+            [styles['heading--scrolled']]: is_scrolled,
+            [styles['heading--inhale']]: breathing_state === 'inhale',
+            [styles['heading--exhale']]: breathing_state === 'exhale'
           })}
         >
-          API Manager
+          <div className={styles.heading__title}>API Manager</div>
+          <div className={styles['heading__breathing-status']}>
+            {breathing_state.toUpperCase()}
+          </div>
         </div>
         <Scrollable max_height="25vh" on_scrolled_change={set_is_scrolled}>
           <div className={styles['requests-container']}>