feat: replace balance wave loading with subtle header spinner (#100)

Author: WiktorStarczewski

src/app/layouts/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 import classNames from 'clsx';
 
@@ -9,7 +9,8 @@ import { openInFullPage, useAppEnv } from 'app/env';
 import { ReactComponent as ChevronDownIcon } from 'app/icons/chevron-down.svg';
 import { ReactComponent as MaximiseIcon } from 'app/icons/maximise.svg';
 import ContentContainer from 'app/layouts/ContentContainer';
-import { useAccount } from 'lib/miden/front';
+import { useAccount, useAllBalances, useAllTokensBaseMetadata } from 'lib/miden/front';
+import { useWalletStore } from 'lib/store';
 import { Link } from 'lib/woozie';
 
 import { HeaderSelectors } from './Header.selectors';
@@ -33,9 +34,39 @@ const Header: FC = () => {
 
 export default Header;
 
+const SyncSpinner: FC<{ visible: boolean }> = ({ visible }) => (
+  <div
+    className="animate-spin sync-spinner-fade"
+    style={{
+      width: 16,
+      height: 16,
+      border: '2px solid #E5E7EB',
+      borderTopColor: '#F97316',
+      borderRadius: '50%',
+      opacity: visible ? 1 : 0,
+      transition: 'opacity 300ms ease-in-out'
+    }}
+  />
+);
+
 const Control: FC = () => {
   const account = useAccount();
   const { popup } = useAppEnv();
+  const allTokensBaseMetadata = useAllTokensBaseMetadata();
+  const { isLoading: isLoadingBalances } = useAllBalances(account.publicKey, allTokensBaseMetadata);
+  const hasCompletedInitialSync = useWalletStore(s => s.hasCompletedInitialSync);
+  const isSyncing = isLoadingBalances || !hasCompletedInitialSync;
+
+  // Show spinner only if syncing takes > 1s, then fade out over 300ms
+  const [showSpinner, setShowSpinner] = useState(false);
+  useEffect(() => {
+    if (isSyncing) {
+      const showTimeout = setTimeout(() => setShowSpinner(true), 1000);
+      return () => clearTimeout(showTimeout);
+    }
+    const hideTimeout = setTimeout(() => setShowSpinner(false), 300);
+    return () => clearTimeout(hideTimeout);
+  }, [isSyncing]);
 
   const handleMaximiseViewClick = () => {
     openInFullPage();
@@ -69,6 +100,7 @@ const Control: FC = () => {
           </Link>
         </div>
         <div className="flex items-center gap-2">
+          {showSpinner && <SyncSpinner visible={isSyncing} />}
           <NetworkSelect className="self-end" />
           {popup && (
             <Button

src/app/pages/Explore/Tokens.tsx

@@ -6,9 +6,7 @@ import { useTranslation } from 'react-i18next';
 import useMidenFaucetId from 'app/hooks/useMidenFaucetId';
 import { Avatar } from 'components/Avatar';
 import { CardItem } from 'components/CardItem';
-import { SyncWaveBackground } from 'components/SyncWaveBackground';
 import { useAccount, useAllTokensBaseMetadata, useAllBalances } from 'lib/miden/front';
-import { useWalletStore } from 'lib/store';
 import { navigate } from 'lib/woozie';
 import { truncateAddress } from 'utils/string';
 
@@ -17,14 +15,7 @@ const Tokens: FC = () => {
   const account = useAccount();
   const { t } = useTranslation();
   const allTokensBaseMetadata = useAllTokensBaseMetadata();
-  const { data: allTokenBalances = [], isLoading: isLoadingBalances } = useAllBalances(
-    account.publicKey,
-    allTokensBaseMetadata
-  );
-  const hasCompletedInitialSync = useWalletStore(s => s.hasCompletedInitialSync);
-
-  // Show loading indicator during initial balance fetch and first chain sync
-  const showLoadingWave = isLoadingBalances || !hasCompletedInitialSync;
+  const { data: allTokenBalances = [] } = useAllBalances(account.publicKey, allTokensBaseMetadata);
 
   return (
     <>
@@ -41,7 +32,6 @@ const Tokens: FC = () => {
               const { tokenId, metadata } = asset;
               return (
                 <div key={tokenId} className="relative flex">
-                  <SyncWaveBackground isSyncing={showLoadingWave} className="rounded-lg" />
                   <CardItem
                     iconLeft={
                       <Avatar size="lg" image={isMiden ? '/misc/miden.png' : '/misc/token-logos/default.svg'} />

src/main.css

@@ -263,3 +263,8 @@ button,
   animation-duration: 1s !important;
   animation-delay: 0s !important;
 }
+
+/* Re-enable sync spinner fade transition (override the global disable) */
+.extension-no-animations .sync-spinner-fade {
+  transition: opacity 300ms ease-in-out !important;
+}