Add pulse animations for loading sync-state values

Author: myieye

frontend/viewer/src/app.postcss

@@ -26,6 +26,10 @@
   .app {
     @apply bg-background text-foreground;
   }
+
+  .loading-text {
+    @apply bg-foreground/15 animate-pulse rounded-md text-transparent;
+  }
 }
 
 .font-inter {

frontend/viewer/src/lib/components/ui/format/format-relative-date.svelte

@@ -14,6 +14,7 @@
     showActualDate?: boolean;
     actualDateOptions?: Intl.DateTimeFormatOptions;
     maxUnits?: number;
+    loading?: boolean;
   };
 
   const {
@@ -24,6 +25,7 @@
     showActualDate = false,
     actualDateOptions,
     maxUnits = 2,
+    loading,
     ...restProps
   }: Props = $props();
 
@@ -60,7 +62,7 @@
 </script>
 
 {#if showActualDate && actualFormattedDate}
-  <span class="inline-flex items-center gap-1">
+  <span class:loading-text={loading} class="inline-flex items-center gap-1">
     <time {...restProps}>{formattedRelativeDate}</time>
     <Popover.Root>
       <Popover.Trigger>
@@ -73,5 +75,5 @@
     </Popover.Root>
   </span>
 {:else}
-  <time {...restProps}>{formattedRelativeDate}</time>
+  <time class:loading-text={loading} {...restProps}>{formattedRelativeDate}</time>
 {/if}

frontend/viewer/src/project/sync/FwLiteToFwMergeDetails.svelte

@@ -37,6 +37,7 @@
   const lastFwLiteSyncDate = $derived(remoteStatus?.lastCrdtCommitDate ? new Date(remoteStatus.lastCrdtCommitDate) : undefined);
   let lexboxToFlexCount = $derived(remoteStatus?.pendingCrdtChanges ?? '?');
   let flexToLexboxCount = $derived(remoteStatus?.pendingMercurialChanges ?? '?');
+  let loading = $derived(remoteStatus === undefined);
 
   function onSyncLexboxToFlex(flexToLexboxCount: number, lexboxToFlexCount: number) {
     loadingSyncLexboxToFlex = true;
@@ -55,6 +56,7 @@
         <FormatRelativeDate
           date={lastFwLiteSyncDate}
           showActualDate
+          {loading}
           defaultValue={remoteStatus?.status === ProjectSyncStatusEnum.NeverSynced ? $t`Never` : $t`Unknown`}/>
       </T>
     </span>
@@ -68,7 +70,7 @@
           status={{loggedIn: false, server: server}}
           statusChange={s => onLoginStatusChange(s)}/>
       {:else}
-        <span>{$t`${flexToLexboxCount} Commits`}</span>
+        <span class:loading-text={loading}>{$t`${flexToLexboxCount} Commits`}</span>
         <SyncArrow dir="left" tailLength={120} size={1.25}/>
         <Button
           loading={loadingSyncLexboxToFlex}
@@ -80,7 +82,7 @@
           {$t`Sync`}
         </Button>
         <SyncArrow dir="right" tailLength={120} size={1.25}/>
-        <span>{$t`${lexboxToFlexCount} Changes`}</span>
+        <span class:loading-text={loading}>{$t`${lexboxToFlexCount} Commits`}</span>
       {/if}
   </div>
   <div class="border rounded flex flex-col items-center justify-center text-center p-2">
@@ -91,6 +93,7 @@
         <FormatRelativeDate
           date={lastFlexSyncDate}
           showActualDate
+          {loading}
           defaultValue={remoteStatus?.status === ProjectSyncStatusEnum.NeverSynced ? $t`Never` : $t`Unknown`}/>
       </T>
     </span>