Enable grayscale loading indicator — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Enable grayscale loading indicator

Merged did:key:z6MkkfM3...sVz5 opened 2 years ago

2 files changed +10 -10 2d3fbe79 → 54662ad1

modified src/components/Loading.svelte

@@ -1,6 +1,7 @@

 <script lang="ts">
   import debounce from "lodash/debounce";
   export let grayscale = false;
   export let small = false;
   export let center = false;
   export let fadeIn = false;

@@ -50,6 +51,10 @@

     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
   }
   .spinner.grayscale > div {
     background-color: var(--color-fill-ghost);
   }
   .spinner.condensed > div {
     -webkit-animation: sk-bouncedelay-condensed 0.7s infinite linear both;
     animation: sk-bouncedelay-condensed 0.7s infinite linear both;

@@ -151,19 +156,14 @@

       class="spinner"
       class:fade-in={fadeIn}
       class:small
       class:grayscale
       class:center
       class:margins
       class:condensed>
       <div
         class="bounce1"
         style="background-color: var(--color-fill-secondary)" />
       <div class="bounce1" style="" />
       {#if !condensed}
         <div
           class="bounce2"
           style="background-color: var(--color-fill-secondary)" />
         <div
           class="bounce3"
           style="background-color: var(--color-fill-secondary)" />
         <div class="bounce2" />
         <div class="bounce3" />
       {/if}
     </div>
   </div>

modified src/views/projects/Source/Tree/Folder.svelte

@@ -96,7 +96,7 @@

 {#if expanded}
   <div class="container">
     {#await tree}
       <span class="loading"><Loading noDelay small margins /></span>
       <span class="loading"><Loading grayscale noDelay small margins /></span>
     {:then tree}
       {#if tree}
         {#each tree.entries as entry (entry.path)}