fix: blinking previewer

frontend/src/components/files/Preview.vue

@@ -5,12 +5,15 @@
         <i class="material-icons">close</i>
       </button>
 
+      <template v-if="!loading">
         <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>
 
+    <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>
@@ -37,6 +40,7 @@
           <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
         </a>
       </div>
+    </template>
   </div>
 </template>
 
@@ -96,30 +100,23 @@ export default {
       return `${this.previewUrl}&inline=true`
     }
   },
+  watch: {
+    req: function () {
+      this.updatePreview()
+    }
+  },
   async mounted () {
     window.addEventListener('keyup', this.key)
-
+    this.$store.commit('setPreviewMode', true)
-    if (this.req.subtitles) {
+    this.updatePreview()
-      this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
-    }
-
-    try {
-      if (this.oldReq.items) {
-        this.updateLinks(this.oldReq.items)
-      } else {
-        const path = url.removeLastDir(this.$route.path)
-        const res = await api.fetch(path)
-        this.updateLinks(res.items)
-      }
-    } catch (e) {
-      this.$showError(e)
-    }
   },
   beforeDestroy () {
     window.removeEventListener('keyup', this.key)
+    this.$store.commit('setPreviewMode', false)
   },
   methods: {
     back () {
+      this.$store.commit('setPreviewMode', false)
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
     },
@@ -138,7 +135,26 @@ export default {
         if (this.hasPrevious) this.prev()
       }
     },
-    updateLinks (items) {
+    async updatePreview () {
+      if (this.req.subtitles) {
+        this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
+      }
+
+      this.previousLink = ''
+      this.nextLink = ''
+      
+      let items = this.oldReq.items
+
+      if (!items) {
+        try {
+          const path = url.removeLastDir(this.$route.path)
+          const res = await api.fetch(path)
+          items = res.items
+        } catch (e) {
+          this.$showError(e)
+        }
+      }
+
       for (let i = 0; i < items.length; i++) {
         if (items[i].name !== this.req.name) {
           continue

frontend/src/store/index.js

@@ -23,7 +23,8 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null
+  showConfirm: null,
+  previewMode: false
 }
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -82,6 +82,9 @@ const mutations = {
   resetClipboard: (state) => {
     state.clipboard.key = ''
     state.clipboard.items = []
+  },
+  setPreviewMode(state, value) {
+    state.previewMode = value
   }
 }
 

frontend/src/views/Files.vue

@@ -10,14 +10,15 @@
         <router-link :to="link.url">{{ link.name }}</router-link>
       </span>
     </div>
+
     <div v-if="error">
       <not-found v-if="error.message === '404'"></not-found>
       <forbidden v-else-if="error.message === '403'"></forbidden>
       <internal-error v-else></internal-error>
     </div>
+    <preview v-else-if="isPreview"></preview>
     <editor v-else-if="isEditor"></editor>
     <listing :class="{ multiple }" v-else-if="isListing"></listing>
-    <preview v-else-if="isPreview"></preview>
     <div v-else>
       <h2 class="message">
         <span>{{ $t('files.loading') }}</span>
@@ -65,7 +66,7 @@ export default {
       'show'
     ]),
     isPreview () {
-      return !this.loading && !this.isListing && !this.isEditor
+      return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode
     },
     breadcrumbs () {
       let parts = this.$route.path.split('/')