From b9a2e9d954f7df85bd0f5b242217a0dcf32bd581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 2 Sep 2022 10:37:56 +0200
Subject: [PATCH] Show loading indicators after a delay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This prevents from loading indicators flickering for a split second
during a page draw. For requests that take longer than 200ms we show the
loading animation.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/Loading.svelte | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/Loading.svelte b/src/Loading.svelte
index c557bdab1..73957a3e5 100644
--- a/src/Loading.svelte
+++ b/src/Loading.svelte
@@ -1,10 +1,22 @@
 <script lang="ts">
+  import { onDestroy } from "svelte";
+
   export let small = false;
   export let color = "secondary";
   export let center = false;
   export let fadeIn = false;
   export let margins = false;
   export let condensed = false;
+
+  let show: boolean = false;
+
+  const timeout = window.setTimeout(() => {
+    show = true;
+  }, 200);
+
+  onDestroy(() => {
+    window.clearTimeout(timeout);
+  });
 </script>
 
 <style>
@@ -136,18 +148,20 @@
   }
 </style>
 
-<div class="container">
-  <div
-    class="spinner"
-    class:fade-in={fadeIn}
-    class:small
-    class:center
-    class:margins
-    class:condensed>
-    <div class="bounce1" style="background-color: var(--color-{color})" />
-    {#if !condensed}
-      <div class="bounce2" style="background-color: var(--color-{color})" />
-      <div class="bounce3" style="background-color: var(--color-{color})" />
-    {/if}
+{#if show}
+  <div class="container">
+    <div
+      class="spinner"
+      class:fade-in={fadeIn}
+      class:small
+      class:center
+      class:margins
+      class:condensed>
+      <div class="bounce1" style="background-color: var(--color-{color})" />
+      {#if !condensed}
+        <div class="bounce2" style="background-color: var(--color-{color})" />
+        <div class="bounce3" style="background-color: var(--color-{color})" />
+      {/if}
+    </div>
   </div>
-</div>
+{/if}