added loading indicator when loading directory
mellbacon committed
Dec 16, 2022 at 23:34 UTC
3ba76d2128181f8ea769472770b4411297f77881
3 files changed
+30
-8
src/components/FileTree/FileTree.svelte
+21
-7
@@ -7,6 +7,8 @@
7
import { filetree, workspacename } from "./scripts/TreeStore";
8
import { data, workspace } from "./scripts/TreeData";
9
import { addFileTab } from "../Tabs/scripts/Tab";
10
+ import { InlineLoading } from "carbon-components-svelte";
11
+ import { loadingtree } from "./scripts/TreeData";
12
let treeview = null;
13
let tree = $filetree;
14
@@ -19,6 +21,17 @@
21
let name = $workspacename;
22
workspacename.subscribe(n => name = n);
23
});
24
+
25
+ async function loadTree() {
26
+ let treedata = await data();
27
+ if (treedata === undefined) {
28
+ loadingtree.set(false);
29
+ return;
30
+ }
31
+ filetree.set(treedata);
32
+ workspacename.set(workspace());
33
+ loadingtree.set(false);
34
+ }
35
</script>
36
37
<div id="explorer-toolbar">
@@ -32,24 +45,25 @@
45
</div>
46
</div>
47
35
-{#if tree.length==0}
48
+{#if tree.length==0 || $loadingtree}
49
<div class="container">
50
+ {#if $loadingtree}
51
+ <InlineLoading description="Loading workspace..."></InlineLoading>
52
+ {:else}
53
<div class="text-form">
54
You have not yet opened a folder.
55
</div>
56
<!-- svelte-ignore a11y-click-events-have-key-events -->
57
<div class="toolbar-button-mx" on:click ={async() => {
42
- let treedata = await data();
43
- if (treedata === undefined) return;
44
- filetree.set(treedata);
45
- workspacename.set(workspace());
58
+ await loadTree();
59
}
60
}>Open Folder</div>
61
+ {/if}
62
</div>
63
+{:else}
64
+ <TreeView isFileTree dblclick bind:this={treeview} size="compact" hideLabel children={tree} on:select={openTab}></TreeView>
65
{/if}
66
51
-<TreeView isFileTree dblclick bind:this={treeview} size="compact" hideLabel children={tree} on:select={openTab}></TreeView>
52
-
67
68
<style>
69
#explorer-toolbar {
src/components/FileTree/scripts/TreeData.ts
+3
@@ -1,10 +1,12 @@
1
import { dialog, fs } from "@tauri-apps/api";
2
import { readTextFile } from "@tauri-apps/api/fs";
3
import { sep } from "@tauri-apps/api/path";
4
+import { writable } from "svelte/store";
5
import { EditorFile } from "../../../scripts/EditorFile";
6
import { filetree } from "./TreeStore";
7
let parentname: string;
8
let dir;
9
+export let loadingtree =writable(false);
10
export async function data() {
11
let dirname = await dialog.open({ directory: true }) as string;
12
if (dirname === null) return;
@@ -13,6 +15,7 @@ export async function data() {
15
}
16
17
async function loadTree() {
18
+ loadingtree.set(true);
19
let children = await fs.readDir(dir, { recursive: true });
20
id = 0;
21
cache = [];
src/components/Header/header_menus/FileMenu.ts
+6
-1
@@ -2,6 +2,7 @@ import { filetree, workspacename } from "../../FileTree/scripts/TreeStore";
2
import { data, workspace } from "../../FileTree/scripts/TreeData";
3
import { addFileTab, addSettingsTab } from "../../Tabs/scripts/Tab";
4
import { getFile, saveFile, saveFileAs } from "../../../scripts/EditorFile";
5
+import { loadingtree } from "../../FileTree/scripts/TreeData";
6
7
export async function addNewFile() {
8
await addFileTab();
@@ -13,9 +14,13 @@ export async function openFile() {
14
}
15
export async function openFolder() {
16
let treedata = await data();
16
- if (treedata === undefined) return;
17
+ if (treedata === undefined) {
18
+ loadingtree.set(false);
19
+ return;
20
+ }
21
filetree.set(treedata);
22
workspacename.set(workspace());
23
+ loadingtree.set(false);
24
}
25
export async function saveOpenFile() {
26
await saveFile()