Fix flickering App Top Bar in Preview app

owncloud · Jul 27, 2022 · bd2c197 · bd2c197
1 parent a9320b6
commit bd2c197
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
@@ -7,6 +7,21 @@
     @keydown.right="next"
     @keydown.esc="closeApp"
   >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
+    <app-top-bar :resource="activeFilteredFile" @close="closeApp">
+      <template #right>
+        <oc-button
+          v-if="!isFileContentError"
+          class="preview-download"
+          size="small"
+          :aria-label="$gettext('Download currently viewed file')"
+          @click="triggerActiveFileDownload"
+        >
+          <oc-icon size="small" name="file-download" />
+        </oc-button>
+      </template>
+    </app-top-bar>
+
     <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
     </div>
@@ -19,19 +34,6 @@
       :accessible-label="$gettext('Failed to load media file')"
     />
     <template v-else>
-      <h1 class="oc-invisible-sr" v-text="pageTitle" />
-      <app-top-bar :resource="activeFilteredFile" @close="closeApp">
-        <template #right>
-          <oc-button
-            class="preview-download"
-            size="small"
-            :aria-label="$gettext('Download currently viewed file')"
-            @click="triggerActiveFileDownload"
-          >
-            <oc-icon size="small" name="file-download" />
-          </oc-button>
-        </template>
-      </app-top-bar>
       <div
         v-show="activeMediaFileCached"
         class="

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="oc-flex oc-p-s app-top-bar">
-    <oc-resource id="app-top-bar-resource" :is-thumbnail-displayed="false" :resource="resource" />
+    <oc-resource
+      v-if="resource"
+      id="app-top-bar-resource"
+      :is-thumbnail-displayed="false"
+      :resource="resource"
+    />
+    <div v-else />
+
     <div>
       <slot name="right"></slot>
       <oc-button
@@ -22,8 +29,7 @@ export default defineComponent({
   name: 'AppTopBar',
   props: {
     resource: {
-      type: Object,
-      required: true
+      type: Object
     }
   }
 })