Fix pulse animation for graph skeleton

src/lib/components/WaterfallView.svelte

@@ -891,23 +891,23 @@
       <div class="relative">
         {#if isCalculationRunning}
           <div class="absolute inset-0 bg-white z-50" out:fade>
-            <div class="flex flex-col gap-5 m-2 p-2 animate-pulse">
+            <div class="flex flex-col gap-5 m-2 p-2 animate-pulse-2">
               {#each [2, 3, 2] as row}
                 <div class="flex flex-col gap-2">
-                  <div class="bg-neutral-200 w-24 h-4" />
+                  <div class="bg-neutral-300 w-24 h-4" />
                   <div class="flex gap-4">
                     {#each Array(row) as _}
                       <div
                         class="h-9 flex items-center bg-white text-neutral-600 border rounded-full overflow-hidden"
                       >
-                        <div class="bg-neutral-200 w-9 h-9" />
-                        <div class="bg-neutral-200 mx-2 w-28 h-4" />
+                        <div class="bg-neutral-300 w-9 h-9" />
+                        <div class="bg-neutral-300 mx-2 w-28 h-4" />
                       </div>
                     {/each}
                   </div>
                 </div>
               {/each}
-              <div class="bg-neutral-200 h-72" />
+              <div class="bg-neutral-300 h-72" />
             </div>
           </div>
         {/if}

tailwind.config.cjs

@@ -25,6 +25,7 @@ const config = {
     extend: {
       animation: {
         blink: "blinker 300ms ease-in 2",
+        "pulse-2": "pulse-2 1.7s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
       backgroundImage: {
         /* Graph paper - Heropatterns.com échelle réduite */
@@ -73,6 +74,14 @@ const config = {
         blinker: {
           "50%": { opacity: "60%" },
         },
+        "pulse-2": {
+          "0%, 100%": {
+            opacity: 1,
+          },
+          "50%": {
+            opacity: 0.2,
+          },
+        },
       },
       scale: {
         25: "0.25",