From 30088670cc5a5a9959cfaefdbd04b7798870cd7d Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Sun, 20 Jun 2021 22:18:05 +0200
Subject: [PATCH] Fix loading indicator bug

---
 src/base/projects/Browser.svelte     | 4 ++--
 src/base/projects/Tree.svelte        | 6 +++---
 src/base/projects/Tree/Folder.svelte | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte
index 5cb289327..ceca780d3 100644
--- a/src/base/projects/Browser.svelte
+++ b/src/base/projects/Browser.svelte
@@ -65,7 +65,7 @@
   // component, eg. when using the browser's "back" button.
   $: getBlob = loadBlob(path);
   $: getAnchor = org ? Org.getAnchor(org, urn, config) : null;
-  $: loading = state.status == Status.Loading ? state.path : null;
+  $: loadingPath = state.status == Status.Loading ? state.path : null;
 </script>
 
 <style>
@@ -210,7 +210,7 @@
       {#if tree.entries.length}
         <div class="column-left">
           <div class="source-tree">
-            <Tree {tree} {path} {fetchTree} {loading} on:select={onSelect} />
+            <Tree {tree} {path} {fetchTree} {loadingPath} on:select={onSelect} />
           </div>
         </div>
         <div class="column-right">
diff --git a/src/base/projects/Tree.svelte b/src/base/projects/Tree.svelte
index bcd582e45..e519afd53 100644
--- a/src/base/projects/Tree.svelte
+++ b/src/base/projects/Tree.svelte
@@ -10,7 +10,7 @@
   export let fetchTree: (path: string) => Promise<Tree>;
   export let path: string;
   export let tree: Tree;
-  export let loading: string | null = null;
+  export let loadingPath: string | null = null;
 
   const dispatch = createEventDispatcher();
   const onSelect = ({ detail: path }: { detail: string }): void => {
@@ -22,7 +22,7 @@
   {#if entry.info.objectType === ObjectType.Tree}
     <Folder
       {fetchTree}
-      {loading}
+      {loadingPath}
       name={entry.info.name}
       prefix={`${entry.path}/`}
       currentPath={path}
@@ -31,7 +31,7 @@
   {:else}
     <File
       active={entry.path === path}
-      loading={entry.path === loading}
+      loading={entry.path === loadingPath}
       name={entry.info.name}
       on:click={() => onSelect({ detail: entry.path })}
     />
diff --git a/src/base/projects/Tree/Folder.svelte b/src/base/projects/Tree/Folder.svelte
index 8b68b5009..562e8f479 100644
--- a/src/base/projects/Tree/Folder.svelte
+++ b/src/base/projects/Tree/Folder.svelte
@@ -11,7 +11,7 @@
   export let name: string;
   export let prefix: string;
   export let currentPath: string;
-  export let loading: string | null = null;
+  export let loadingPath: string | null = null;
 
   let expanded = currentPath.indexOf(prefix) === 0;
   let tree: Promise<Tree> | null = expanded ? fetchTree(prefix) : null;
@@ -78,11 +78,12 @@
               name={entry.info.name}
               on:select={onSelectFile}
               prefix={`${entry.path}/`}
+              {loadingPath}
               {currentPath} />
           {:else}
             <File
               active={entry.path === currentPath}
-              loading={entry.path === loading}
+              loading={entry.path === loadingPath}
               name={entry.info.name}
               on:click={() => {
                 onSelectFile({ detail: entry.path });