diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
index 784141c4b..97d6c77d0 100644
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ b/frontend/resources/styles/main/partials/viewer.scss
@@ -25,6 +25,12 @@
   }
 }
 
+.viewer-loader {
+  svg#loader-pencil {
+    fill: $color-gray-50;
+  }
+}
+
 .viewer-section {
   height: calc(100vh - 48px);
   grid-row: 1 / span 2;
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 99762cf73..ce5eb322a 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -534,9 +534,11 @@
      (fn []
        (st/emit! (dv/finalize props)))))
 
-  (when-let [data (mf/deref refs/viewer-data)]
+  (if-let [data (mf/deref refs/viewer-data)]
     (let [key (str (get-in data [:file :id]))]
-      [:& viewer {:params props :data data :key key}])))
+      [:& viewer {:params props :data data :key key}])
+    [:div.loader-content.viewer-loader
+     i/loader-pencil]))
 
 (mf/defc breaking-change-notice
   []