diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index ee64478141..0df13e1ba1 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -24,7 +24,7 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { DSLImportMode } from '@/models/app'
 import { importDSL } from '@/service/apps'
 import { fetchAppDetail } from '@/service/explore'
-import { exploreAppListInitialData, useExploreAppList } from '@/service/use-explore'
+import { useExploreAppList } from '@/service/use-explore'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
@@ -70,10 +70,14 @@ const Apps = ({
   })
 
   const {
-    data: { categories, allList } = exploreAppListInitialData,
+    data,
+    isLoading,
   } = useExploreAppList()
 
   const filteredList = useMemo(() => {
+    if (!data)
+      return []
+    const { allList } = data
     const filteredByCategory = allList.filter((item) => {
       if (currCategory === allCategoriesEn)
         return true
@@ -94,7 +98,7 @@ const Apps = ({
         return true
       return false
     })
-  }, [currentType, currCategory, allCategoriesEn, allList])
+  }, [currentType, currCategory, allCategoriesEn, data])
 
   const searchFilteredList = useMemo(() => {
     if (!searchKeywords || !filteredList || filteredList.length === 0)
@@ -156,7 +160,7 @@ const Apps = ({
     }
   }
 
-  if (!categories || categories.length === 0) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -190,7 +194,7 @@ const Apps = ({
       <div className="relative flex flex-1 overflow-y-auto">
         {!searchKeywords && (
           <div className="h-full w-[200px] p-4">
-            <Sidebar current={currCategory as AppCategories} categories={categories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
+            <Sidebar current={currCategory as AppCategories} categories={data?.categories || []} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
           </div>
         )}
         <div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">
diff --git a/web/app/components/explore/app-list/index.spec.tsx b/web/app/components/explore/app-list/index.spec.tsx
index ebf2c9c075..c84da1931c 100644
--- a/web/app/components/explore/app-list/index.spec.tsx
+++ b/web/app/components/explore/app-list/index.spec.tsx
@@ -10,7 +10,9 @@ import AppList from './index'
 const allCategoriesEn = 'explore.apps.allCategories:{"lng":"en"}'
 let mockTabValue = allCategoriesEn
 const mockSetTab = vi.fn()
-let mockExploreData: { categories: string[], allList: App[] } = { categories: [], allList: [] }
+let mockExploreData: { categories: string[], allList: App[] } | undefined = { categories: [], allList: [] }
+let mockIsLoading = false
+let mockIsError = false
 const mockHandleImportDSL = vi.fn()
 const mockHandleImportDSLConfirm = vi.fn()
 
@@ -34,8 +36,11 @@ vi.mock('ahooks', async () => {
 })
 
 vi.mock('@/service/use-explore', () => ({
-  exploreAppListInitialData: { categories: [], allList: [] },
-  useExploreAppList: () => ({ data: mockExploreData }),
+  useExploreAppList: () => ({
+    data: mockExploreData,
+    isLoading: mockIsLoading,
+    isError: mockIsError,
+  }),
 }))
 
 vi.mock('@/service/explore', () => ({
@@ -136,13 +141,16 @@ describe('AppList', () => {
     vi.clearAllMocks()
     mockTabValue = allCategoriesEn
     mockExploreData = { categories: [], allList: [] }
+    mockIsLoading = false
+    mockIsError = false
   })
 
   // Rendering: show loading when categories are not ready.
   describe('Rendering', () => {
-    it('should render loading when categories are empty', () => {
+    it('should render loading when the query is loading', () => {
       // Arrange
-      mockExploreData = { categories: [], allList: [] }
+      mockExploreData = undefined
+      mockIsLoading = true
 
       // Act
       renderWithContext()
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 244a116e36..5ab68f9b04 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -20,7 +20,7 @@ import {
   DSLImportMode,
 } from '@/models/app'
 import { fetchAppDetail } from '@/service/explore'
-import { exploreAppListInitialData, useExploreAppList } from '@/service/use-explore'
+import { useExploreAppList } from '@/service/use-explore'
 import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
@@ -28,11 +28,6 @@ type AppsProps = {
   onSuccess?: () => void
 }
 
-export enum PageType {
-  EXPLORE = 'explore',
-  CREATE = 'create',
-}
-
 const Apps = ({
   onSuccess,
 }: AppsProps) => {
@@ -58,10 +53,16 @@ const Apps = ({
   })
 
   const {
-    data: { categories, allList } = exploreAppListInitialData,
+    data,
+    isLoading,
+    isError,
   } = useExploreAppList()
 
-  const filteredList = allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
+  const filteredList = useMemo(() => {
+    if (!data)
+      return []
+    return data.allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
+  }, [data, currCategory, allCategoriesEn])
 
   const searchFilteredList = useMemo(() => {
     if (!searchKeywords || !filteredList || filteredList.length === 0)
@@ -119,7 +120,7 @@ const Apps = ({
     })
   }, [handleImportDSLConfirm, onSuccess])
 
-  if (!categories || categories.length === 0) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -127,6 +128,11 @@ const Apps = ({
     )
   }
 
+  if (isError || !data)
+    return null
+
+  const { categories } = data
+
   return (
     <div className={cn(
       'flex h-full flex-col border-l-[0.5px] border-divider-regular',
diff --git a/web/service/use-explore.ts b/web/service/use-explore.ts
index 8bda877908..68ddf966ab 100644
--- a/web/service/use-explore.ts
+++ b/web/service/use-explore.ts
@@ -12,11 +12,6 @@ type ExploreAppListData = {
   allList: App[]
 }
 
-export const exploreAppListInitialData: ExploreAppListData = {
-  categories: [],
-  allList: [],
-}
-
 export const useExploreAppList = () => {
   return useQuery<ExploreAppListData>({
     queryKey: [NAME_SPACE, 'appList'],
@@ -27,7 +22,6 @@ export const useExploreAppList = () => {
         allList: [...recommended_apps].sort((a, b) => a.position - b.position),
       }
     },
-    placeholderData: exploreAppListInitialData,
   })
 }