From 48cbd532c27b03e35e8f47afe67b23f344842ae5 Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Fri, 18 Jul 2025 14:45:21 +0200
Subject: [PATCH] fix loading indicator for traversing warrens

---
 frontend/components/AppSidebar.vue     |  6 +++---
 frontend/components/DirectoryEntry.vue | 14 +++++++++++---
 frontend/pages/warrens/files.vue       | 19 +++++++++++++++----
 frontend/stores/index.ts               | 10 ++++------
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/components/AppSidebar.vue b/frontend/components/AppSidebar.vue
index 90610bf..60c6a3c 100644
--- a/frontend/components/AppSidebar.vue
+++ b/frontend/components/AppSidebar.vue
@@ -18,7 +18,7 @@ const store = useWarrenStore();
 const session = useAuthSession();
 
 async function selectWarren(id: string) {
-    await store.setCurrentWarren(id, '/');
+    store.setCurrentWarren(id, '/');
     await navigateTo({
         path: '/warrens/files',
     });
@@ -56,6 +56,7 @@ async function selectWarren(id: string) {
                                     <SidebarMenuSubItem
                                         v-for="(warren, id) in store.warrens"
                                         :key="id"
+                                        @click="() => selectWarren(id)"
                                     >
                                         <SidebarMenuSubButton
                                             :tooltip="warren.name"
@@ -63,8 +64,7 @@ async function selectWarren(id: string) {
                                                 store.current != null &&
                                                 store.current.warrenId === id
                                             "
-                                            class="transition-all"
-                                            @click="() => selectWarren(id)"
+                                            class="cursor-pointer transition-all select-none"
                                         >
                                             <Icon name="lucide:folder-root" />
                                             <span>{{ warren.name }}</span>
diff --git a/frontend/components/DirectoryEntry.vue b/frontend/components/DirectoryEntry.vue
index 99c405c..a35b774 100644
--- a/frontend/components/DirectoryEntry.vue
+++ b/frontend/components/DirectoryEntry.vue
@@ -47,20 +47,28 @@ async function submitDelete(force: boolean = false) {
 async function openRenameDialog() {
     renameDialog.openDialog(entry);
 }
+
+async function onClick() {
+    if (warrenStore.loading) {
+        return;
+    }
+
+    warrenStore.addToCurrentWarrenPath(entry.name);
+}
 </script>
 
 <template>
     <ContextMenu>
         <ContextMenuTrigger>
             <button
+                :disabled="warrenStore.loading"
                 :class="[
                     'bg-accent/30 border-border flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none',
                     {
-                        'pointer-events-none':
-                            disabled || entry.fileType === 'file',
+                        'pointer-events-none': entry.fileType === 'file',
                     },
                 ]"
-                @click="() => warrenStore.addToCurrentWarrenPath(entry.name)"
+                @click="onClick"
             >
                 <div class="flex flex-row items-center">
                     <Icon class="size-6" :name="getFileIcon(entry.mimeType)" />
diff --git a/frontend/pages/warrens/files.vue b/frontend/pages/warrens/files.vue
index bde6242..9adb1dc 100644
--- a/frontend/pages/warrens/files.vue
+++ b/frontend/pages/warrens/files.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { computedAsync } from '@vueuse/core';
 import DirectoryListContextMenu from '~/components/DirectoryListContextMenu.vue';
 import RenameEntryDialog from '~/components/actions/RenameEntryDialog.vue';
 import { getWarrenDirectory } from '~/lib/api/warrens';
+import type { DirectoryEntry } from '~/types';
 
 definePageMeta({
     middleware: ['authenticated'],
 });
 
 const warrenStore = useWarrenStore();
+const loadingIndicator = useLoadingIndicator();
 
 if (warrenStore.current == null) {
     await navigateTo({
@@ -15,16 +18,24 @@ if (warrenStore.current == null) {
     });
 }
 
-const entries = useAsyncData('current-directory', async () => {
+const entries = computedAsync<DirectoryEntry[]>(async () => {
     if (warrenStore.current == null) {
-        return null;
+        return [];
     }
 
-    return await getWarrenDirectory(
+    loadingIndicator.start();
+    warrenStore.loading = true;
+
+    const entries = await getWarrenDirectory(
         warrenStore.current.warrenId,
         warrenStore.current.path
     );
-}).data;
+
+    warrenStore.loading = false;
+    loadingIndicator.finish();
+
+    return entries;
+}, []);
 </script>
 
 <template>
diff --git a/frontend/stores/index.ts b/frontend/stores/index.ts
index 93720eb..b3dc8f6 100644
--- a/frontend/stores/index.ts
+++ b/frontend/stores/index.ts
@@ -6,16 +6,16 @@ export const useWarrenStore = defineStore('warrens', {
     state: () => ({
         warrens: {} as Record<string, Warren>,
         current: null as { warrenId: string; path: string } | null,
+        loading: false,
     }),
     actions: {
-        async setCurrentWarren(warrenId: string, path: string) {
+        setCurrentWarren(warrenId: string, path: string) {
             this.current = {
                 warrenId,
                 path,
             };
-            await refreshNuxtData('current-directory');
         },
-        async addToCurrentWarrenPath(path: string) {
+        addToCurrentWarrenPath(path: string) {
             if (this.current == null) {
                 return;
             }
@@ -25,9 +25,8 @@ export const useWarrenStore = defineStore('warrens', {
             }
 
             this.current.path += path;
-            await refreshNuxtData('current-directory');
         },
-        async setCurrentWarrenPath(path: string) {
+        setCurrentWarrenPath(path: string) {
             if (this.current == null) {
                 return;
             }
@@ -37,7 +36,6 @@ export const useWarrenStore = defineStore('warrens', {
             }
 
             this.current.path = path;
-            await refreshNuxtData('current-directory');
         },
         clearCurrentWarren() {
             this.current = null;