Show loading overlay on canvas while opening .fig files

CHANGELOG.md

@@ -29,6 +29,7 @@
 
 ### UI
 
+- Loading overlay on canvas while opening .fig files
 - Replace all native `<select>` dropdowns with reka-ui `AppSelect` component
 - Smoother trackpad pinch-to-zoom with `Math.exp` curve and deltaMode normalization
 - Fix font picker dropdown truncating long font names

src/app.css

@@ -50,3 +50,4 @@ input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   display: none;
 }
+

src/components/EditorCanvas.vue

@@ -42,6 +42,31 @@ const cursor = computed(() => {
   <CanvasContextMenu>
     <div class="canvas-area relative flex-1 min-w-0 min-h-0 overflow-hidden">
       <canvas ref="canvasRef" :style="{ cursor }" class="block size-full touch-none" />
+      <Transition leave-active-class="transition-opacity duration-300" leave-to-class="opacity-0">
+        <div
+          v-if="store.state.loading"
+          class="absolute inset-0 z-50 flex items-center justify-center bg-canvas"
+        >
+          <svg
+            class="size-8 text-white opacity-40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="m15.232 5.232 3.536 3.536m-2.036-5.036a2.5 2.5 0 0 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732Z"
+            />
+          </svg>
+          <div
+            class="absolute bottom-1/2 left-1/2 h-0.5 w-25 -translate-x-1/2 translate-y-10 overflow-hidden rounded-full bg-white/8"
+          >
+            <div class="h-full w-2/5 animate-[slide_1s_ease-in-out_infinite] rounded-full bg-white/25" />
+          </div>
+        </div>
+      </Transition>
     </div>
   </CanvasContextMenu>
 </template>

src/stores/editor.ts

@@ -186,7 +186,8 @@ export function createEditorStore() {
     panY: 0,
     zoom: 1,
     renderVersion: 0,
-    sceneVersion: 0
+    sceneVersion: 0,
+    loading: false
   })
 
   const AUTOSAVE_DELAY = 3000
@@ -565,6 +566,8 @@ export function createEditorStore() {
 
   async function openFigFile(file: File, handle?: FileSystemFileHandle, path?: string) {
     try {
+      state.loading = true
+      await new Promise((r) => requestAnimationFrame(r))
       const imported = await readFigFile(file)
       graph = imported
       computeAllLayouts(graph)
@@ -585,6 +588,8 @@ export function createEditorStore() {
       startWatchingFile()
     } catch (e) {
       console.error('Failed to open .fig file:', e)
+    } finally {
+      state.loading = false
     }
   }