From 921f28e9f9e59a5c0a074d578a2ea3a4a8115772 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Tue, 3 Mar 2026 12:35:54 +0300
Subject: [PATCH] Show loading overlay on canvas while opening .fig files

---
 CHANGELOG.md                    |  1 +
 src/app.css                     |  1 +
 src/components/EditorCanvas.vue | 25 +++++++++++++++++++++++++
 src/stores/editor.ts            |  7 ++++++-
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 418baf97a..2c3c2abeb 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/app.css b/src/app.css
index cf8dcde9d..7ff7e2008 100644
--- a/src/app.css
+++ b/src/app.css
@@ -50,3 +50,4 @@ input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   display: none;
 }
+
diff --git a/src/components/EditorCanvas.vue b/src/components/EditorCanvas.vue
index 3e9b21d18..6639c6cd9 100644
--- a/src/components/EditorCanvas.vue
+++ b/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>
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index 588b02def..69732609c 100644
--- a/src/stores/editor.ts
+++ b/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
     }
   }