From 5ae747e7c19a60e4c6112b40d3ca10a88af05774 Mon Sep 17 00:00:00 2001
From: Dante <bunggl@naver.com>
Date: Sun, 15 Mar 2026 17:15:04 +0900
Subject: [PATCH] fix: prevent white flash when opening mask editor (#9860)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Remove hardcoded `bg-white` from mask editor canvas background div to
prevent white flash on dialog open
- Add a loading spinner while the mask editor initializes (image
loading, canvas setup, GPU resources)
- Background color is set dynamically by `setCanvasBackground()` after
initialization

Fixes #9852


### AS IS


https://github.com/user-attachments/assets/7da61e32-671b-4056-b5ec-8cb246fc7689



### TO BE

https://github.com/user-attachments/assets/bfdedc69-f690-42c5-8591-619623c04f55



┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9860-fix-prevent-white-flash-when-opening-mask-editor-3226d73d365081de9b7ad4622438e6ed)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/maskeditor/MaskEditorContent.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/maskeditor/MaskEditorContent.vue b/src/components/maskeditor/MaskEditorContent.vue
index 89fdf262e2..5d641bae1c 100644
--- a/src/components/maskeditor/MaskEditorContent.vue
+++ b/src/components/maskeditor/MaskEditorContent.vue
@@ -35,9 +35,11 @@
           'z-40': store.activeLayer === 'mask'
         }"
       />
-      <div ref="canvasBackgroundRef" class="size-full bg-white" />
+      <div ref="canvasBackgroundRef" class="size-full" />
     </div>
 
+    <LoadingOverlay :loading="!initialized" size="sm" />
+
     <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
       <div class="flex min-h-0 flex-1 overflow-hidden">
         <ToolPanel
@@ -77,6 +79,8 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
+import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
+
 import BrushCursor from './BrushCursor.vue'
 import PointerZone from './PointerZone.vue'
 import SidePanel from './SidePanel.vue'