chore(web): add dedicated home loading boundary (#40135)

web/app/(commonLayout)/(home)/loading.tsx

@@ -0,0 +1,5 @@
+import { HomeLoading } from '@/features/home/loading'
+
+export default function Loading() {
+  return <HomeLoading />
+}

web/features/home/loading.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { systemFeaturesQueryOptions } from '@/features/system-features/client'
+import { HomeShell } from './home-shell'
+import { HomeSkeleton } from './home-skeleton'
+
+export function HomeLoading() {
+  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
+
+  return (
+    <HomeShell>
+      <div className="flex flex-1 flex-col overflow-y-auto">
+        <HomeSkeleton showBanner={systemFeatures.enable_explore_banner} />
+      </div>
+    </HomeShell>
+  )
+}

web/features/home/page.tsx

@@ -1,5 +1,4 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
-import { Suspense } from 'react'
 import { getQueryClient } from '@/app/get-query-client'
 import {
   getSystemFeaturesQueryClient,
@@ -8,8 +7,6 @@ import {
 import { getLocaleOnServer } from '@/i18n-config/server'
 import { getServerConsoleClientContext, serverConsoleQuery } from '@/service/server'
 import { HomeContent } from './home-content/home-content'
-import { HomeShell } from './home-shell'
-import { HomeSkeleton } from './home-skeleton'
 
 export async function HomePage() {
   const homeQueryClient = getQueryClient()
@@ -47,17 +44,7 @@ export async function HomePage() {
 
   return (
     <HydrationBoundary state={dehydratedState}>
-      <Suspense
-        fallback={
-          <HomeShell>
-            <div className="flex flex-1 flex-col overflow-y-auto">
-              <HomeSkeleton showBanner={enableExploreBanner} />
-            </div>
-          </HomeShell>
-        }
-      >
-        <HomeContent />
-      </Suspense>
+      <HomeContent />
     </HydrationBoundary>
   )
 }