[MS] Adds spinner when loading workspaces and folders

client/src/locales/en-US.json

@@ -365,6 +365,7 @@
         "createWorkspace": "New workspace",
         "itemCount": "No items | 1 item | {count} items",
         "noWorkspaces": "You do not have access to any workspace yet. Workspaces that you create or have been shared with you will be listed here.",
+        "loading": "Loading your workspaces...",
         "noMatchingWorkspaces": "No workspace match this search filter.",
         "listError": "Failed to list the workspaces.",
         "newWorkspaceError": "Failed to create a new workspace.",
@@ -430,6 +431,7 @@
         "itemCount": "No items | 1 item | {count} items",
         "itemSelectedCount": "No selected items | 1 selected item | {count} selected items",
         "emptyFolder": "This folder is empty.",
+        "loading": "Loading the folder...",
         "listDisplayTitles": {
             "name": "Name",
             "updatedBy": "Updated By",

client/src/locales/fr-FR.json

@@ -365,6 +365,7 @@
         "createWorkspace": "Nouvel espace de travail",
         "itemCount": "Aucun élément | 1 élément | {count} éléments",
         "noWorkspaces": "Vous n'avez pas encore accès à un espace de travail. Les espaces de travail que vous créerez ou qui vous seront partagés s'afficheront ici.",
+        "loading": "Chargement de vos espaces de travail...",
         "noMatchingWorkspaces": "Aucun espace de travail ne correspond à cette recherche.",
         "listError": "Impossible de lister les espaces de travail.",
         "newWorkspaceError": "Impossible de créer le nouvel espace de travail.",
@@ -430,6 +431,7 @@
         "itemCount": "Aucun élément | Un élément | {count} éléments",
         "itemSelectedCount": "Aucun élément sélectionné | 1 élément sélectionné | {count} éléments sélectionnés",
         "emptyFolder": "Ce dossier est vide.",
+        "loading": "Chargement du dossier...",
         "listDisplayTitles": {
             "name": "Nom",
             "updatedBy": "Modifié par",

client/src/views/files/FoldersPage.vue

@@ -131,7 +131,22 @@
           @files-added="startImportFiles"
         />
         <div
-          v-if="folders.entriesCount() + files.entriesCount() + (fileOperationsCurrentDir ? fileOperationsCurrentDir.length : 0) === 0"
+          v-show="querying"
+          class="body-lg"
+        >
+          <div class="no-files-content">
+            <ms-spinner />
+            <ion-text>
+              {{ $msTranslate('FoldersPage.loading') }}
+            </ion-text>
+          </div>
+        </div>
+
+        <div
+          v-if="
+            !querying &&
+            folders.entriesCount() + files.entriesCount() + (fileOperationsCurrentDir ? fileOperationsCurrentDir.length : 0) === 0
+          "
           class="no-files body-lg"
         >
           <file-drop-zone
@@ -149,7 +164,7 @@
             </div>
           </file-drop-zone>
         </div>
-        <div v-else>
+        <div v-else-if="!querying">
           <div v-if="displayView === DisplayState.List">
             <file-list-display
               :files="files"
@@ -200,6 +215,7 @@
   Translatable,
   Clipboard,
   asyncComputed,
+  MsSpinner,
 } from 'megashark-lib';
 import * as parsec from '@/parsec';
 
@@ -311,6 +327,9 @@
 const files = ref(new EntryCollection<FileModel>());
 const displayView = ref(DisplayState.List);
 const workspaceInfo: Ref<parsec.StartedWorkspaceInfo | null> = ref(null);
+// Init at true to avoid blinking while we're mounting the component
+// but we're not loading the files yet.
+const querying = ref(true);
 
 const fileInputsRef = ref();
 let eventCbId: string | null = null;
@@ -702,6 +721,7 @@
   if (!currentRouteIs(Routes.Documents)) {
     return;
   }
+  querying.value = true;
   const result = await parsec.statFolderChildren(workspaceInfo.value.handle, currentPath.value);
   if (result.ok) {
     const newFolders: FolderModel[] = [];
@@ -761,6 +781,7 @@
       PresentationMode.Toast,
     );
   }
+  querying.value = false;
 }
 
 async function onEntryClick(entry: EntryModel, _event: Event): Promise<void> {

client/src/views/workspaces/WorkspacesPage.vue

@@ -42,7 +42,19 @@
       <!-- workspaces -->
       <div class="workspaces-container scroll">
         <div
-          v-if="filteredWorkspaces.length === 0"
+          v-show="querying"
+          class="body-lg"
+        >
+          <div class="no-workspaces-content">
+            <ms-spinner />
+            <ion-text>
+              {{ $msTranslate('WorkspacesPage.loading') }}
+            </ion-text>
+          </div>
+        </div>
+
+        <div
+          v-if="!querying && filteredWorkspaces.length === 0"
           class="no-workspaces body"
         >
           <div class="no-workspaces-content">
@@ -161,6 +173,7 @@ import {
   MsSorter,
   MsSorterChangeEvent,
   MsSearchInput,
+  MsSpinner,
 } from 'megashark-lib';
 import {
   WORKSPACES_PAGE_DATA_KEY,
@@ -223,6 +236,7 @@ const workspaceList: Ref<Array<WorkspaceInfo>> = ref([]);
 const displayView = ref(DisplayState.Grid);
 const favorites: Ref<WorkspaceID[]> = ref([]);
 const filterWorkspaceName = ref('');
+const querying = ref(true);
 
 const informationManager: InformationManager = inject(InformationManagerKey)!;
 const storageManager: StorageManager = inject(StorageManagerKey)!;
@@ -396,6 +410,7 @@ async function refreshWorkspacesList(): Promise<void> {
   if (!currentRouteIs(Routes.Workspaces)) {
     return;
   }
+  querying.value = true;
   const result = await parsecListWorkspaces();
   if (result.ok) {
     for (const wk of result.value) {
@@ -424,6 +439,7 @@ async function refreshWorkspacesList(): Promise<void> {
       PresentationMode.Toast,
     );
   }
+  querying.value = false;
 }
 
 const filteredWorkspaces = computed(() => {