Add fade animation to view counter

src/components/ArticleViewCounter.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { actions } from "astro:actions";
   import { onMount } from "svelte";
+  import { expoIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
 
   export let articleSlug: string;
 
@@ -13,10 +15,9 @@
   });
 </script>
 
-{#if counter !== null}
-  <span class="px-2">⋅</span>
-
 <span class="inline-flex items-center space-x-1">
+  <span class="px-1">⋅</span>
+
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="12">
     <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <style>
@@ -30,6 +31,7 @@
     />
   </svg>
 
-    <span>{counter}</span>
+  {#if counter !== null}
-  </span>
+    <span transition:fade={{ duration: 200, easing: expoIn }}>{counter}</span>
   {/if}
+</span>

src/pages/articles/[article].astro

@@ -37,7 +37,7 @@ const title = headings[0].text;
           }
         </span>
 
-        <ArticleViewCounter articleSlug={project.slug} client:only="svelte" />
+        <ArticleViewCounter articleSlug={project.slug} client:load />
       </p>
 
       <ProseLayout>