feat(app): add text blink (#2455)

when stat in statsbar on explorer updates it quickly flashes the text, kinda like a ticker behaves on exchanges.
unionlabs · Jul 16, 2024 · 0076b55 · 0076b55
2 parents ebfad7a + b65ccd5
commit 0076b55
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/app/src/lib/components/stats-bar-stat.svelte b/app/src/lib/components/stats-bar-stat.svelte
@@ -5,6 +5,7 @@ import LoadingDots from "$lib/components/loading-dots.svelte"
 
 export let label: string
 export let value: number | string
+export let blink: boolean
 
 function formatValue(value: number | string): string {
   if (typeof value === "number") {
@@ -25,8 +26,21 @@ function formatValue(value: number | string): string {
         <LoadingDots class="size-6"/>
       </div>
     {:else }
-      <div class="text-xl pt-2 font-bold">{formatValue(value)}</div>
+      {#key value}
+        <p class="text-xl pt-2 font-bold" class:blink={blink}>{formatValue(value)}</p>
+      {/key}
     {/if}
   </div>
   <slot/>
-</div>
+</div>
+
+<style>
+    .blink {
+        animation: blink-animation 0.5s;
+    }
+
+    @keyframes blink-animation {
+        0% { @apply text-accent; }
+        100% { @apply text-primary; }
+    }
+</style>
diff --git a/app/src/routes/explorer/(components)/stats-bar.svelte b/app/src/routes/explorer/(components)/stats-bar.svelte
@@ -15,11 +15,11 @@ $: transferCountData = transferCountQuery()
 
   <div class="bg-muted border-b flex">
     <div class="w-full flex flex-1">
-      <StatsBarStat label={"Total Transfers"} value={$transferCountData?.data?.aggregate?.count || 0}/>
+      <StatsBarStat label={"Total Transfers"} value={$transferCountData?.data?.aggregate?.count || 0} blink={true}/>
       <Separator orientation="vertical"/>
-      <StatsBarStat label="Total Packets" value={$packetCountData?.data?.aggregate?.count || 0}/>
+      <StatsBarStat label="Total Packets" value={$packetCountData?.data?.aggregate?.count || 0} blink={true}/>
       <Separator orientation="vertical"/>
-      <StatsBarStat label="Metrics" value={$userTime}>
+      <StatsBarStat label="Metrics" value={$userTime} blink={false}>
         {#if $transfersPerDayData.data}
           <div class="ml-6 flex items-end">
             <PixelGraph data={$transfersPerDayData.data}/>