From 2e21fb43d5edbf4f8e271bff8a6d6fa3736a79f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 13 Oct 2022 16:09:40 +0200
Subject: [PATCH] fix(frontend): Update skeleton animation timings (#730)

---
 frontend/src/lib/components/common/skeleton/Skeleton.svelte    | 3 +--
 .../src/lib/components/common/skeleton/SkeletonElement.svelte  | 2 +-
 frontend/tailwind.config.cjs                                   | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/common/skeleton/Skeleton.svelte b/frontend/src/lib/components/common/skeleton/Skeleton.svelte
index c4616f1e5d..651c6366e5 100644
--- a/frontend/src/lib/components/common/skeleton/Skeleton.svelte
+++ b/frontend/src/lib/components/common/skeleton/Skeleton.svelte
@@ -6,13 +6,12 @@
 	export let layout: SkeletonLayout
 	export let loading = true
 	export let overlay = false
-	export let delay = 200
 </script>
 
 {#if loading}
 	<div class="relative flex justify-center">
 		<div
-			in:fade={{ duration: 1000, delay }}
+			in:fade={{ duration: 1000 }}
 			class="flex grow flex-col overflow-hidden {overlay
 				? 'absolute w-full h-full z-[1000]'
 				: ''} {$$props.class}"
diff --git a/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte b/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
index f8c3e9f658..ea652a8429 100644
--- a/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
+++ b/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
@@ -5,6 +5,6 @@
 </script>
 
 <div
-	class="animate-skeleton"
+	class="animate-skeleton [animation-delay:1000ms]"
 	style="height: {element.h * HEIGHT_UNIT}px; width: {element.w}%; min-width: {element.minW}px;"
 />
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 015006bcc6..7aa4a2bbec 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -286,7 +286,7 @@ const config = {
 				},
 				'.animate-skeleton': {
 					animation: theme('animation.pulse'),
-					backgroundColor: theme('colors.blue.200'),
+					backgroundColor: theme('colors.blue.100'),
 					borderRadius: theme('borderRadius.DEFAULT'),
         },
 				'.text-blue-gradient': {