Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show loading indicators after a delay
Rūdolfs Ošiņš committed 3 years ago
commit b9a2e9d954f7df85bd0f5b242217a0dcf32bd581
parent b3b3c06a03c05e1fb53cca93fbf460ee314b5e1c
1 file changed +28 -14
modified 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}