feat: animate snapshot status bar

src/components/Debug/SnapshotStatus.css

@@ -1,10 +1,16 @@
 .SnapshotStatus__TopBar {
   width: 100%;
-  height: 43px;
+  height: 0;
   background: var(--black-700);
-  padding-top: 12px;
   display: flex;
   justify-content: center;
+  overflow: hidden;
+  transition: all 0.75s ease 0s;
+}
+
+.SnapshotStatus__TopBar--visible {
+  padding-top: 12px;
+  height: 43px;
 }
 
 .SnapshotStatus__Text {

src/components/Debug/SnapshotStatus.tsx

@@ -1,38 +1,39 @@
 import React, { useEffect, useState } from 'react'
 
+import classNames from 'classnames'
+
 import { Governance } from '../../clients/Governance'
 import { ServiceHealth } from '../../clients/SnapshotTypes'
 import Markdown from '../Common/Typography/Markdown'
 import WarningTriangle from '../Icon/WarningTriangle'
 
 import './SnapshotStatus.css'
 
-const PING_INTERVAL = 5000
+const PING_INTERVAL_IN_MS = 5000 // 5 seconds
 
 export default function SnapshotStatus() {
   const [serviceHealth, setServiceHealth] = useState<ServiceHealth>(ServiceHealth.Normal)
+  const [showTopBar, setShowTopBar] = useState(false) // Control bar visibility
 
   const updateServiceStatus = async () => {
     const status = await Governance.get().getSnapshotStatus()
     setServiceHealth(status.health)
+    setShowTopBar(status.health === ServiceHealth.Slow || status.health === ServiceHealth.Failing)
   }
 
   useEffect(() => {
-    const intervalId = setInterval(updateServiceStatus, PING_INTERVAL)
+    const intervalId = setInterval(updateServiceStatus, PING_INTERVAL_IN_MS)
     return () => clearInterval(intervalId)
   }, [])
 
-  const showTopBar = serviceHealth === ServiceHealth.Slow || serviceHealth === ServiceHealth.Failing
   return (
     <>
-      {showTopBar && (
-        <div className="SnapshotStatus__TopBar">
-          <WarningTriangle size="18" />
-          <Markdown size="sm" componentsClassNames={{ p: 'SnapshotStatus__Text', strong: 'SnapshotStatus__Text' }}>
-            {'**Snapshot is failing.** Voting and creating proposals is currently unavailable.'}
-          </Markdown>
-        </div>
-      )}
+      <div className={classNames(`SnapshotStatus__TopBar`, showTopBar && 'SnapshotStatus__TopBar--visible')}>
+        <WarningTriangle size="18" />
+        <Markdown size="sm" componentsClassNames={{ p: 'SnapshotStatus__Text', strong: 'SnapshotStatus__Text' }}>
+          {'**Snapshot is failing.** Voting and creating proposals is currently unavailable.'}
+        </Markdown>
+      </div>
     </>
   )
 }

src/services/SnapshotService.ts

@@ -26,14 +26,13 @@ import RpcService from './RpcService'
 
 const DELEGATION_STRATEGY_NAME = 'delegation'
 const SLOW_RESPONSE_TIME_THRESHOLD_IN_MS = 5000 // 5 seconds
-const PING_INTERVAL_IN_SECONDS = 300 // 5 minutes
+const PING_INTERVAL_IN_SECONDS = 60 // 1 minute
 
 export class SnapshotService {
   public static async getStatus(): Promise<SnapshotStatus | undefined> {
     try {
       const cachedStatus = CacheService.get<SnapshotStatus>('snapshotStatus')
       if (cachedStatus) {
-        console.log('cachedStatus', cachedStatus)
         return cachedStatus
       }