diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 429a40d38a..6b66667486 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -108,6 +108,18 @@ const Apps = ({
     isFetching,
   } = useImportDSL()
   const [showDSLConfirmModal, setShowDSLConfirmModal] = useState(false)
+
+  const isShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.isShowTryAppPanel)
+  const setShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.setShowTryAppPanel)
+  const hideTryAppPanel = useCallback(() => {
+    setShowTryAppPanel(false)
+  }, [setShowTryAppPanel])
+  const appParams = useContextSelector(ExploreContext, ctx => ctx.currentApp)
+  const handleShowFromTryApp = useCallback(() => {
+    setCurrApp(appParams?.app || null)
+    setIsShowCreateModal(true)
+  }, [appParams?.app])
+
   const onCreate: CreateAppModalProps['onConfirm'] = async ({
     name,
     icon_type,
@@ -115,6 +127,8 @@ const Apps = ({
     icon_background,
     description,
   }) => {
+    hideTryAppPanel()
+
     const { export_data } = await fetchAppDetail(
       currApp?.app.id as string,
     )
@@ -143,17 +157,6 @@ const Apps = ({
     })
   }, [handleImportDSLConfirm, onSuccess])
 
-  const isShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.isShowTryAppPanel)
-  const setShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.setShowTryAppPanel)
-  const hideTryAppPanel = useCallback(() => {
-    setShowTryAppPanel(false)
-  }, [setShowTryAppPanel])
-  const appParams = useContextSelector(ExploreContext, ctx => ctx.currentApp)
-  const handleShowFromTryApp = useCallback(() => {
-    setCurrApp(appParams?.app || null)
-    setIsShowCreateModal(true)
-  }, [appParams?.app])
-
   if (!categories || categories.length === 0) {
     return (
       <div className="flex h-full items-center">