feat: add previewer title and loading indicator

frontend/public/themes/dark.css

@@ -16,7 +16,7 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div {
+#loading .spinner div, #previewer .loading .spinner div {
   background: var(--icon);
 }
 

frontend/src/components/files/Preview.vue

@@ -5,12 +5,27 @@
         <i class="material-icons">close</i>
       </button>
 
+      <template v-if="!loading">
+        <div class="title">
+          <span>{{ req.name }}</span>
+        </div>
+
         <rename-button v-if="user.perm.rename"></rename-button>
         <delete-button v-if="user.perm.delete"></delete-button>
         <download-button v-if="user.perm.download"></download-button>
         <info-button></info-button>
+      </template>
     </div>
 
+    <div class="loading" v-if="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    </div>
+
+    <template v-if="!loading">
       <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
         <i class="material-icons">chevron_left</i>
       </button>
@@ -76,7 +91,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['req', 'user', 'oldReq', 'jwt']),
+    ...mapState(['req', 'user', 'oldReq', 'jwt', 'loading']),
     hasPrevious () {
       return (this.previousLink !== '')
     },

frontend/src/css/styles.css

@@ -125,8 +125,13 @@
   height: 3.7em;
 }
 
-#previewer .action:first-of-type {
+#previewer .bar .title {
   margin-right: auto;
+  padding: 0 1em;
+  line-height: 2.7em;
+  overflow: hidden;
+  word-break: break-word;
+  color: #fff;
 }
 
 #previewer .action i {
@@ -219,6 +224,11 @@
   font-size: 1.2em;
 }
 
+#previewer .loading {
+  height: 100%;
+  width: 100%;
+}
+
 #editor-container #editor {
   height: calc(100vh - 8.2em);
 }