fix(web): stop Splash after useUserProfile errors (#35326)

web/app/components/__tests__/splash.spec.tsx

@@ -0,0 +1,59 @@
+import type { MockedFunction } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useUserProfile } from '@/service/use-common'
+import Splash from '../splash'
+
+vi.mock('@/service/use-common', () => ({
+  useUserProfile: vi.fn(),
+}))
+
+const mockUseUserProfile = useUserProfile as MockedFunction<typeof useUserProfile>
+
+describe('Splash', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the loading indicator while the profile query is pending', () => {
+    mockUseUserProfile.mockReturnValue({
+      isPending: true,
+      isError: false,
+      data: undefined,
+    } as ReturnType<typeof useUserProfile>)
+
+    render(<Splash />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should not render the loading indicator when the profile query succeeds', () => {
+    mockUseUserProfile.mockReturnValue({
+      isPending: false,
+      isError: false,
+      data: {
+        profile: { id: 'user-1' },
+        meta: {
+          currentVersion: '1.13.3',
+          currentEnv: 'DEVELOPMENT',
+        },
+      },
+    } as ReturnType<typeof useUserProfile>)
+
+    render(<Splash />)
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+
+  it('should stop rendering the loading indicator when the profile query errors', () => {
+    mockUseUserProfile.mockReturnValue({
+      isPending: false,
+      isError: true,
+      data: undefined,
+      error: new Error('profile request failed'),
+    } as ReturnType<typeof useUserProfile>)
+
+    render(<Splash />)
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+})

web/app/components/splash.tsx

@@ -5,15 +5,16 @@ import { useUserProfile } from '@/service/use-common'
 import Loading from './base/loading'
 
 const Splash: FC<PropsWithChildren> = () => {
-  const { isPending, data } = useUserProfile()
+  const { isPending } = useUserProfile()
 
-  if (isPending || !data?.profile) {
+  if (isPending) {
     return (
       <div className="fixed inset-0 z-9999999 flex h-full items-center justify-center bg-background-body">
         <Loading />
       </div>
     )
   }
+
   return null
 }
 export default React.memo(Splash)