From d11a0f6c5ee6c056335b7697af6d0d91791d2810 Mon Sep 17 00:00:00 2001 From: Jin Yi Date: Wed, 11 Mar 2026 08:00:10 +0900 Subject: [PATCH] feat: replace loading indicator with C logo fill loader and pre-Vue splash screen (#9516) --- index.html | 56 +++++++++- public/splash.css | 51 +++++++++ src/App.vue | 19 ++-- src/components/graph/GraphCanvas.vue | 81 +++++++------- .../loader/LogoCFillLoader.stories.ts | 96 ----------------- src/components/loader/LogoCFillLoader.vue | 100 ------------------ .../workspace/auth/WorkspaceAuthGate.test.ts | 10 +- .../workspace/auth/WorkspaceAuthGate.vue | 10 +- src/services/colorPaletteService.ts | 22 +++- src/views/GraphView.vue | 1 - src/views/UserSelectView.vue | 2 + 11 files changed, 184 insertions(+), 264 deletions(-) create mode 100644 public/splash.css delete mode 100644 src/components/loader/LogoCFillLoader.stories.ts delete mode 100644 src/components/loader/LogoCFillLoader.vue diff --git a/index.html b/index.html index afe368e39c..1d80c9ec92 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ + -
- +
+ + + + + + + + + + + + +
+ +
diff --git a/public/splash.css b/public/splash.css new file mode 100644 index 0000000000..1e4867bcb6 --- /dev/null +++ b/public/splash.css @@ -0,0 +1,51 @@ +/* Pre-Vue splash loader — colors set by inline script */ +#splash-loader { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + contain: strict; +} +#splash-loader svg { + width: min(200px, 50vw); + height: auto; + transform: translateZ(0); +} +#splash-loader .wave-group { + animation: splash-rise 4s ease-in-out infinite alternate; + will-change: transform; + transform: translateZ(0); +} +#splash-loader .wave-path { + animation: splash-wave 1.2s linear infinite; + will-change: transform; + transform: translateZ(0); +} +@keyframes splash-rise { + from { + transform: translateY(280px); + } + to { + transform: translateY(-80px); + } +} +@keyframes splash-wave { + from { + transform: translateX(0); + } + to { + transform: translateX(-880px); + } +} +@media (prefers-reduced-motion: reduce) { + #splash-loader .wave-group, + #splash-loader .wave-path { + animation: none; + } + #splash-loader .wave-group { + transform: translateY(-80px); + } +} diff --git a/src/App.vue b/src/App.vue index d8f25a1bf3..9ec886dd76 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,20 +2,13 @@ -
- -
- - diff --git a/src/platform/workspace/auth/WorkspaceAuthGate.test.ts b/src/platform/workspace/auth/WorkspaceAuthGate.test.ts index fc87bfa530..2d48621a9b 100644 --- a/src/platform/workspace/auth/WorkspaceAuthGate.test.ts +++ b/src/platform/workspace/auth/WorkspaceAuthGate.test.ts @@ -81,18 +81,16 @@ describe('WorkspaceAuthGate', () => { await flushPromises() expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true) - expect(wrapper.find('[role="status"]').exists()).toBe(false) expect(mockRefreshRemoteConfig).not.toHaveBeenCalled() }) }) describe('cloud builds - unauthenticated user', () => { - it('shows spinner while waiting for Firebase auth', () => { + it('hides slot while waiting for Firebase auth', () => { mockIsInitialized.value = false const wrapper = mountComponent() - expect(wrapper.find('[role="status"]').exists()).toBe(true) expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false) }) @@ -100,7 +98,7 @@ describe('WorkspaceAuthGate', () => { mockIsInitialized.value = false const wrapper = mountComponent() - expect(wrapper.find('[role="status"]').exists()).toBe(true) + expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false) mockIsInitialized.value = true mockCurrentUser.value = null @@ -179,8 +177,8 @@ describe('WorkspaceAuthGate', () => { const wrapper = mountComponent() await flushPromises() - // Still showing spinner before timeout - expect(wrapper.find('[role="status"]').exists()).toBe(true) + // Slot not yet rendered before timeout + expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false) // Advance past the 10 second timeout await vi.advanceTimersByTimeAsync(10_001) diff --git a/src/platform/workspace/auth/WorkspaceAuthGate.vue b/src/platform/workspace/auth/WorkspaceAuthGate.vue index 438c250c48..342195243f 100644 --- a/src/platform/workspace/auth/WorkspaceAuthGate.vue +++ b/src/platform/workspace/auth/WorkspaceAuthGate.vue @@ -1,11 +1,5 @@