⚡️ perf: refactor the responsive layout to improve performance (lobeh…

…ub#1541)

src/app/chat/(desktop)/index.tsx

@@ -4,18 +4,22 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import Conversation from './features/Conversation';
 import SideBar from './features/SideBar';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 const DesktopPage = memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <PageTitle />
       <ChatHeader />
@@ -24,6 +28,6 @@ const DesktopPage = memo(() => (
         <SideBar />
       </Flexbox>
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));
 export default DesktopPage;

src/app/chat/settings/(desktop)/index.tsx

@@ -4,20 +4,24 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
 import SessionHydration from '@/app/chat/components/SessionHydration';
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import EditPage from '../features/EditPage';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 const ChatSettings = memo(() => (
   <>
-    <ResponsiveIndex Mobile={Mobile}>
+    <ResponsiveContainer Mobile={Mobile}>
       <Layout>
         <EditPage />
       </Layout>
-    </ResponsiveIndex>
+    </ResponsiveContainer>
     <SessionHydration />
   </>
 ));

src/app/market/(desktop)/index.tsx

@@ -4,19 +4,23 @@ import { SpotlightCard, SpotlightCardProps } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import AgentCard from '@/app/market/features/AgentCard';
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
+import AgentCard from '../features/AgentCard';
 import Index from '../index';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <Index />
       <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

src/app/settings/(desktop)/index.tsx

@@ -3,19 +3,23 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
 import DesktopLayout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo<SettingsCommonProps>((props) => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <DesktopLayout activeTab={SettingsTabs.Common}>
       <Common {...props} />
     </DesktopLayout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

src/app/settings/(desktop)/layout.responsive.tsx

@@ -3,11 +3,16 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+// TODO: need to be removed
+import ResponsiveLayout from '@/layout/ServerResponsiveLayout/Client';
 
 import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
 
-const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
+const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
   <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>

src/app/settings/layout.server.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, memo } from 'react';
 
-import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+import ResponsiveLayout from '@/layout/ServerResponsiveLayout';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import DesktopLayout from './(desktop)/layout.responsive';

src/app/welcome/(desktop)/index.tsx

@@ -3,19 +3,23 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import Footer from './features/Footer';
 import Showcase from './features/Showcase';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <Showcase />
       <Footer />
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

src/components/ResponsiveContainer/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { FC, ReactNode, memo } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ResponsiveContainerProps {
+  Mobile: FC;
+  children: ReactNode;
+}
+
+const ResponsiveContainer = memo(({ children, Mobile }: ResponsiveContainerProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : children;
+});
+
+ResponsiveContainer.displayName = 'ResponsiveContainer';
+
+export default ResponsiveContainer;

src/features/MobileSwitchLoading/index.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
+import FullscreenLoading from '@/components/FullscreenLoading';
+
+const MobileSwitchLoading = () => {
+  const { t } = useTranslation('common');
+
+  return <FullscreenLoading title={t('layoutInitializing')} />;
+};
+
+export default MobileSwitchLoading;

src/layout/ResponsiveLayout.client.tsx → src/layout/ServerResponsiveLayout/Client.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { ReactNode, Suspense, memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactNode, memo } from 'react';
 
-import FullscreenLoading from '@/components/FullscreenLoading';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface ServerResponsiveLayoutProps extends Record<string, any> {
@@ -14,16 +12,9 @@ interface ServerResponsiveLayoutProps extends Record<string, any> {
 
 const ResponsiveLayout = memo(
   ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
-    const { t } = useTranslation();
     const mobile = useIsMobile();
 
-    return mobile ? (
-      <Suspense fallback={<FullscreenLoading title={t('layoutInitializing', { ns: 'common' })} />}>
-        <Mobile {...res}>{children}</Mobile>
-      </Suspense>
-    ) : (
-      <Desktop {...res}>{children}</Desktop>
-    );
+    return mobile ? <Mobile {...res}>{children}</Mobile> : <Desktop {...res}>{children}</Desktop>;
   },
 );
 

src/layout/ResponsiveLayout.server.tsx → src/layout/ServerResponsiveLayout/index.tsx

@@ -7,10 +7,15 @@ interface ServerResponsiveLayoutProps extends Record<string, any> {
   Mobile: (props: any) => ReactNode;
   children?: ReactNode;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
+const ServerResponsiveLayout = ({
+  children,
+  Desktop,
+  Mobile,
+  ...res
+}: ServerResponsiveLayoutProps) => {
   const mobile = isMobileDevice();
 
   return mobile ? <Mobile {...res}>{children}</Mobile> : <Desktop {...res}>{children}</Desktop>;
 };
 
-export default ResponsiveLayout;
+export default ServerResponsiveLayout;