From cefb31dbb76a39ae66bd2cc29a0890ff2bc5907b Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Thu, 24 Jul 2025 22:59:22 -0300
Subject: [PATCH] fix: initial file list loading indicator

---
 frontend/src/css/styles.css         |  1 +
 frontend/src/views/Files.vue        |  4 ++--
 frontend/src/views/files/Editor.vue | 26 +++++++++++++++++---------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 241d9593..a793b025 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -329,6 +329,7 @@ main .spinner .bounce2 {
 #editor-container {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   background-color: var(--background);
   position: fixed;
   padding-top: 4em;
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index fe385c6b..805f4027 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <header-bar
-      v-if="error || fileStore.req?.type === null"
+      v-if="error || fileStore.req?.type === undefined"
       showMenu
       showLogo
     />
@@ -9,7 +9,7 @@
     <breadcrumbs base="/files" />
     <errors v-if="error" :errorCode="error.status" />
     <component v-else-if="currentView" :is="currentView"></component>
-    <div v-else-if="currentView !== null">
+    <div v-else>
       <h2 class="message delayed">
         <div class="spinner">
           <div class="bounce1"></div>
diff --git a/frontend/src/views/files/Editor.vue b/frontend/src/views/files/Editor.vue
index 08d2c043..3408fb97 100644
--- a/frontend/src/views/files/Editor.vue
+++ b/frontend/src/views/files/Editor.vue
@@ -32,17 +32,25 @@
       />
     </header-bar>
 
-    <Breadcrumbs base="/files" noLink />
-
     <!-- preview container -->
-    <div
-      v-show="isPreview && isMarkdownFile"
-      id="preview-container"
-      class="md_preview"
-      v-html="previewContent"
-    ></div>
+    <div class="loading delayed" v-if="layoutStore.loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    </div>
+    <template v-else>
+      <Breadcrumbs base="/files" noLink />
 
-    <form v-show="!isPreview || !isMarkdownFile" id="editor"></form>
+      <div
+        v-show="isPreview && isMarkdownFile"
+        id="preview-container"
+        class="md_preview"
+        v-html="previewContent"
+      ></div>
+      <form v-show="!isPreview || !isMarkdownFile" id="editor"></form>
+    </template>
   </div>
 </template>