From 9909650694f26be21e94cf841481197480d058e3 Mon Sep 17 00:00:00 2001
From: Toufic Batache <taffou2a@gmail.com>
Date: Thu, 18 Jan 2024 11:02:03 +0100
Subject: [PATCH] Fix pulse animation for graph skeleton
---
src/lib/components/WaterfallView.svelte | 10 +++++-----
tailwind.config.cjs | 9 +++++++++
2 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte
index 2e4434858..c8dc32aca 100644
--- a/src/lib/components/WaterfallView.svelte
+++ b/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}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 20626bd59..1cc4b8e17 100644
--- a/tailwind.config.cjs
+++ b/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",
--
GitLab