From f56f93f5c284b38e2fb4180eb4ec99c33096c8e1 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sat, 30 May 2026 23:14:26 +0800
Subject: [PATCH] fix(web): defer try app preview loading

---
 .../components/explore/app-list/__tests__/index.spec.tsx  | 8 +++++---
 web/app/components/explore/app-list/index.tsx             | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/app/components/explore/app-list/__tests__/index.spec.tsx b/web/app/components/explore/app-list/__tests__/index.spec.tsx
index b89be133e1..a87f949202 100644
--- a/web/app/components/explore/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/explore/app-list/__tests__/index.spec.tsx
@@ -682,7 +682,7 @@ describe('AppList', () => {
       renderAppList(true, undefined, undefined, { isCloudEdition: true })
 
       fireEvent.click(getLastByText('explore.appCard.try'))
-      expect(screen.getByTestId('try-app-panel')).toBeInTheDocument()
+      expect(await screen.findByTestId('try-app-panel')).toBeInTheDocument()
 
       fireEvent.click(screen.getByTestId('try-app-create'))
 
@@ -705,6 +705,7 @@ describe('AppList', () => {
       renderAppList(true, undefined, undefined, { isCloudEdition: true })
 
       fireEvent.click(getLastByText('explore.appCard.try'))
+      await screen.findByTestId('try-app-panel')
       fireEvent.click(screen.getByTestId('try-app-create'))
       fireEvent.click(await screen.findByTestId('confirm-create'))
 
@@ -717,7 +718,8 @@ describe('AppList', () => {
       })
     })
 
-    it('should close try app panel when close is clicked', () => {
+    it('should close try app panel when close is clicked', async () => {
+      vi.useRealTimers()
       mockExploreData = {
         categories: ['Writing'],
         allList: [createApp()],
@@ -726,7 +728,7 @@ describe('AppList', () => {
       renderAppList(true, undefined, undefined, { isCloudEdition: true })
 
       fireEvent.click(getLastByText('explore.appCard.try'))
-      expect(screen.getByTestId('try-app-panel')).toBeInTheDocument()
+      expect(await screen.findByTestId('try-app-panel')).toBeInTheDocument()
 
       fireEvent.click(screen.getByTestId('try-app-close'))
       expect(screen.queryByTestId('try-app-panel')).not.toBeInTheDocument()
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index c0b51b79a3..ab521a34ae 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -18,18 +18,20 @@ import CreateAppModal from '@/app/components/explore/create-app-modal'
 import { useAppContext } from '@/context/app-context'
 import { useImportDSL } from '@/hooks/use-import-dsl'
 import { DSLImportMode } from '@/models/app'
+import dynamic from '@/next/dynamic'
 import { consoleQuery } from '@/service/client'
 import { fetchAppDetail } from '@/service/explore'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
 import { useMembers } from '@/service/use-common'
 import { useExploreAppList } from '@/service/use-explore'
 import { trackCreateApp } from '@/utils/create-app-tracking'
-import TryApp from '../try-app'
 import { ExploreAppListHeader } from './explore-app-list-header'
 import { ExploreRecommendations } from './explore-recommendations'
 import { ExploreAppListSkeleton, ExploreHeaderSkeleton } from './loading-skeletons'
 import s from './style.module.css'
 
+const TryApp = dynamic(() => import('../try-app'), { ssr: false })
+
 function useHomeContinueWorkApps() {
   return useQuery(consoleQuery.apps.list.queryOptions({
     input: {