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 @@