chore: add loading for off-screen comps (#215)

* chore: add loading for off-screen comps

* fix(re-render): caused by complex array in mobx hooks

package.json

@@ -66,7 +66,7 @@
     "mobx": "^6.12.0",
     "mobx-react": "^9.1.0",
     "mobx-react-lite": "^4.0.5",
-    "mobx-state-tree": "^5.4.0",
+    "mobx-state-tree": "^5.4.1",
     "nanoid": "^3.1.12",
     "next": "^14.1.1",
     "next-compose-plugins": "^2.2.0",

src/app/Landing/ArticlesIntroTabs/Content.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
 
 import type { TThread } from '@/spec'
 import { THREAD } from '@/constant/thread'
@@ -31,4 +31,4 @@ const Content: FC<TProps> = ({ tab }) => {
   )
 }
 
-export default Content
+export default memo(Content)

src/app/Landing/DashboardIntros/index.tsx

@@ -1,19 +1,24 @@
-import { FC, useState } from 'react'
+import { FC, useState, lazy, Suspense } from 'react'
 
 import { DASHBOARD_ROUTE } from '@/constant/route'
 import useMetric from '@/hooks/useMetric'
 
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 import type { TIntroTab } from './spec'
-import SideMenus from './SideMenus'
-import LayoutTab from './LayoutTab'
-import SeoTab from './SeoTab'
-import CMSTab from './CMSTab'
-import TagsTab from './TagsTab'
-import AdminsTab from './AdminsTab'
-import LinksTab from './LinksTab'
-import IntegrateTab from './IntegrateTab'
-import ImportTab from './ImportTab'
-import TrendTab from './TrendTab'
+
+export const SideMenus = lazy(() => import('./SideMenus'))
+export const LayoutTab = lazy(() => import('./LayoutTab'))
+export const SeoTab = lazy(() => import('./SeoTab'))
+
+export const CMSTab = lazy(() => import('./CMSTab'))
+export const TagsTab = lazy(() => import('./TagsTab'))
+export const AdminsTab = lazy(() => import('./AdminsTab'))
+export const LinksTab = lazy(() => import('./LinksTab'))
+
+export const IntegrateTab = lazy(() => import('./IntegrateTab'))
+export const ImportTab = lazy(() => import('./ImportTab'))
+export const TrendTab = lazy(() => import('./TrendTab'))
 
 import {
   Wrapper,
@@ -25,6 +30,10 @@ import {
   Right,
 } from '../styles/dashboard_intros'
 
+const Loading = () => {
+  return <LavaLampLoading top={0} left={30} />
+}
+
 const DashboardIntros: FC = () => {
   const metric = useMetric()
   const [tab, setTab] = useState<TIntroTab>(DASHBOARD_ROUTE.LAYOUT)
@@ -39,16 +48,61 @@ const DashboardIntros: FC = () => {
       <ContentWrapper metric={metric}>
         <InnerWrapper $tab={tab} metric={metric}>
           <SideMenus tab={tab} onChange={(tab) => setTab(tab)} />
+
           <Right>
-            {tab === DASHBOARD_ROUTE.LAYOUT && <LayoutTab />}
-            {tab === DASHBOARD_ROUTE.SEO && <SeoTab />}
-            {tab === DASHBOARD_ROUTE.POST && <CMSTab />}
-            {tab === DASHBOARD_ROUTE.TAGS && <TagsTab />}
-            {tab === DASHBOARD_ROUTE.ADMINS && <AdminsTab />}
-            {tab === DASHBOARD_ROUTE.HEADER && <LinksTab />}
-            {tab === DASHBOARD_ROUTE.WIDGETS && <IntegrateTab />}
-            {tab === DASHBOARD_ROUTE.INOUT && <ImportTab />}
-            {tab === DASHBOARD_ROUTE.TREND && <TrendTab />}
+            {tab === DASHBOARD_ROUTE.LAYOUT && (
+              <Suspense fallback={<Loading />}>
+                <LayoutTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.SEO && (
+              <Suspense fallback={<Loading />}>
+                <SeoTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.POST && (
+              <Suspense fallback={<Loading />}>
+                <CMSTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.TAGS && (
+              <Suspense fallback={<Loading />}>
+                <TagsTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.ADMINS && (
+              <Suspense fallback={<Loading />}>
+                <AdminsTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.HEADER && (
+              <Suspense fallback={<Loading />}>
+                <LinksTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.WIDGETS && (
+              <Suspense fallback={<Loading />}>
+                <IntegrateTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.INOUT && (
+              <Suspense fallback={<Loading />}>
+                <ImportTab />
+              </Suspense>
+            )}
+
+            {tab === DASHBOARD_ROUTE.TREND && (
+              <Suspense fallback={<Loading />}>
+                <TrendTab />
+              </Suspense>
+            )}
           </Right>
         </InnerWrapper>
       </ContentWrapper>

src/app/Landing/index.tsx

@@ -3,7 +3,7 @@
  *
  */
 
-import { FC } from 'react'
+import { FC, Suspense } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { DOC_FAQ_LAYOUT } from '@/constant/layout'
@@ -12,6 +12,7 @@ import useMetric from '@/hooks/useMetric'
 
 import { ROUTE } from '@/constant/route'
 
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 import { DesktopOnly, MobileOnly, LinkAble } from '@/widgets/Common'
 import Tooltip from '@/widgets/Tooltip'
 import FaqList from '@/widgets/FaqList'
@@ -132,24 +133,30 @@ const LandingPage: FC = () => {
 
         <ArticlesIntroTabs />
 
-        <FeatureWall />
-        {/* <FeatureWall /> */}
-        <DashboardIntros />
-        <EnjoyDev />
-        <TechStacks />
-        <DesktopOnly>
-          <Divider top={80} bottom={80} />
-        </DesktopOnly>
-        <MobileOnly>
-          <Divider top={50} bottom={50} />
-        </MobileOnly>
+        <Suspense fallback={<LavaLampLoading />}>
+          <FeatureWall />
+        </Suspense>
+
+        <Suspense fallback={<LavaLampLoading />}>
+          <DashboardIntros />
+        </Suspense>
+
+        <Suspense fallback={<LavaLampLoading />}>
+          <EnjoyDev />
+        </Suspense>
+
+        <Suspense fallback={<LavaLampLoading />}>
+          <TechStacks />
+        </Suspense>
+
+        <Divider top={80} bottom={80} />
         <UsersWall wallpaper={wallpaper} />
-        <DesktopOnly>
-          <Divider top={60} bottom={80} />
-        </DesktopOnly>
+        <Divider top={60} bottom={80} />
+
         <FAQWrapper>
           <FaqList layout={DOC_FAQ_LAYOUT.FLAT} large sections={faqs} />
         </FAQWrapper>
+
         <Divider top={60} bottom={80} />
 
         <Footer />

src/app/[community]/(articles)/about/loading.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react'
+'use client'
 
-const Loading: FC = () => {
-  return (
-    <div>
-      <h2>about loading</h2>
-    </div>
-  )
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
+const Loading = () => {
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading

src/app/[community]/(articles)/changelog/loading.tsx

@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>changelogs loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading

src/app/[community]/(articles)/doc/loading.tsx

@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>doc loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading

src/app/[community]/(articles)/kanban/loading.tsx

@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>kanban loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading

src/app/[community]/(articles)/post/loading.tsx

@@ -1,9 +1,9 @@
+'use client'
+
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
 const Loading = () => {
-  return (
-    <div>
-      <h2>post loading</h2>
-    </div>
-  )
+  return <LavaLampLoading top={80} />
 }
 
 export default Loading

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { cookies } from 'next/headers'
+// import { cookies } from 'next/headers'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 
@@ -17,20 +17,20 @@ export const metadata: Metadata = {
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   // const token = cookies().get('jwtToken')?.value || null
-  const token = null
+  // const token = null
   // const theme = cookies().get('theme')?.value === 'night' ? 'night' : 'day'
-  const theme = 'day'
+  // const theme = 'day'
 
   return (
     <html lang="en">
       <body>
-        <GraphQLProvider token={token}>
-          <RootStoreProvider token={token} theme={theme}>
-            <StyledComponentsRegistry>
+        <StyledComponentsRegistry>
+          <GraphQLProvider>
+            <RootStoreProvider>
               <GlobalLayout>{children}</GlobalLayout>
-            </StyledComponentsRegistry>
-          </RootStoreProvider>
-        </GraphQLProvider>
+            </RootStoreProvider>
+          </GraphQLProvider>
+        </StyledComponentsRegistry>
         <Analytics />
         <SpeedInsights />
       </body>

src/app/page.tsx

@@ -1,7 +1,11 @@
 'use client'
 
+import { memo } from 'react'
+
 import Landing from './Landing'
 
-export default function Page() {
+const Page = () => {
   return <Landing />
 }
+
+export default memo(Page)

src/app/providers/GraphQLProvider.tsx

@@ -10,13 +10,11 @@ import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient }
 import { GRAPHQL_ENDPOINT } from '@/config'
 
 type TProps = {
-  token: null | string
   children: ReactNode
 }
 
-const GraphQLProvider: FC<TProps> = ({ children, token }) => {
+const GraphQLProvider: FC<TProps> = ({ children }) => {
   const [client, ssr] = useMemo(() => {
-    // console.log('## use token: ', token)
     const ssr = ssrExchange()
     const client = createClient({
       url: GRAPHQL_ENDPOINT,
@@ -26,13 +24,13 @@ const GraphQLProvider: FC<TProps> = ({ children, token }) => {
       fetchOptions: () => ({
         headers: {
           special: 'Special header value',
-          authorization: `Bearer ${token || ''}`,
+          authorization: '',
         },
       }),
     })
 
     return [client, ssr]
-  }, [token])
+  }, [])
 
   return (
     <UrqlProvider client={client} ssr={ssr}>