diff --git a/web/app/components/plugins/install-plugin/hooks/use-hide-logic.ts b/web/app/components/plugins/install-plugin/hooks/use-hide-logic.ts
new file mode 100644
index 0000000000..e5d2d1883a
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/hooks/use-hide-logic.ts
@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react'
+import useFoldAnimInto from './use-fold-anim-into'
+
+const useHideLogic = (onClose: () => void) => {
+  const {
+    modalClassName,
+    foldIntoAnim: doFoldAnimInto,
+    clearCountDown,
+    countDownFoldIntoAnim,
+  } = useFoldAnimInto(onClose)
+
+  const [isInstalling, doSetIsInstalling] = useState(false)
+  const setIsInstalling = useCallback((isInstalling: boolean) => {
+    if (!isInstalling)
+      clearCountDown()
+    doSetIsInstalling(isInstalling)
+  }, [clearCountDown])
+
+  const foldAnimInto = useCallback(() => {
+    if (isInstalling) {
+      doFoldAnimInto()
+      return
+    }
+    onClose()
+  }, [doFoldAnimInto, isInstalling, onClose])
+
+  const handleStartToInstall = useCallback(() => {
+    setIsInstalling(true)
+    countDownFoldIntoAnim()
+  }, [countDownFoldIntoAnim, setIsInstalling])
+
+  return {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  }
+}
+
+export default useHideLogic
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 045cdde047..6ce0bb14ed 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -9,8 +9,8 @@ import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
-import useFoldAnimInto from '../hooks/use-fold-anim-into'
 import cn from '@/utils/classnames'
+import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -39,30 +39,10 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
 
   const {
     modalClassName,
-    foldIntoAnim: doFoldAnimInto,
-    clearCountDown,
-    countDownFoldIntoAnim,
-  } = useFoldAnimInto(onClose)
-
-  const [isInstalling, doSetIsInstalling] = useState(false)
-  const setIsInstalling = useCallback((isInstalling: boolean) => {
-    if (!isInstalling)
-      clearCountDown()
-    doSetIsInstalling(isInstalling)
-  }, [clearCountDown])
-
-  const foldAnimInto = useCallback(() => {
-    if (isInstalling) {
-      doFoldAnimInto()
-      return
-    }
-    onClose()
-  }, [doFoldAnimInto, isInstalling, onClose])
-
-  const handleStartToInstall = useCallback(() => {
-    setIsInstalling(true)
-    countDownFoldIntoAnim()
-  }, [countDownFoldIntoAnim, setIsInstalling])
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
 
   const getTitle = useCallback(() => {
     if (isBundle && step === InstallStep.installed)