chore: improve the user experience of not login into apps (#28120)

web/app/(commonLayout)/layout.tsx

@@ -11,6 +11,7 @@ import { ProviderContextProvider } from '@/context/provider-context'
 import { ModalContextProvider } from '@/context/modal-context'
 import GotoAnything from '@/app/components/goto-anything'
 import Zendesk from '@/app/components/base/zendesk'
+import Splash from '../components/splash'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
@@ -27,6 +28,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 </HeaderWrapper>
                 {children}
                 <GotoAnything />
+                <Splash />
               </ModalContextProvider>
             </ProviderContextProvider>
           </EventEmitterContextProvider>

web/app/components/splash.tsx

@@ -0,0 +1,21 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import React from 'react'
+import { useIsLogin } from '@/service/use-common'
+import Loading from './base/loading'
+
+const Splash: FC<PropsWithChildren> = () => {
+  // would auto redirect to signin page if not logged in
+  const { isLoading, data: loginData } = useIsLogin()
+  const isLoggedIn = loginData?.logged_in
+
+  if (isLoading || !isLoggedIn) {
+    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)