diff --git a/web/app/(commonLayout)/(home)/loading.tsx b/web/app/(commonLayout)/(home)/loading.tsx
new file mode 100644
index 00000000000..8ced1439151
--- /dev/null
+++ b/web/app/(commonLayout)/(home)/loading.tsx
@@ -0,0 +1,5 @@
+import { HomeLoading } from '@/features/home/loading'
+
+export default function Loading() {
+  return <HomeLoading />
+}
diff --git a/web/app/(commonLayout)/page.tsx b/web/app/(commonLayout)/(home)/page.tsx
similarity index 100%
rename from web/app/(commonLayout)/page.tsx
rename to web/app/(commonLayout)/(home)/page.tsx
diff --git a/web/features/home/loading.tsx b/web/features/home/loading.tsx
new file mode 100644
index 00000000000..0a1ad02129d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/features/home/page.tsx b/web/features/home/page.tsx
index b119a486ce4..ed283e4a2f7 100644
--- a/web/features/home/page.tsx
+++ b/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>
   )
 }