feat: local and bundle support hide anim

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -6,6 +6,8 @@ import { InstallStep } from '../../types'
 import type { Dependency } from '../../types'
 import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -30,6 +32,13 @@ const InstallBundle: FC<Props> = ({
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
 
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -42,8 +51,8 @@ const InstallBundle: FC<Props> = ({
   return (
     <Modal
       isShow={true}
-      onClose={onClose}
-      className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
       closable
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
@@ -54,6 +63,8 @@ const InstallBundle: FC<Props> = ({
       <ReadyToInstall
         step={step}
         onStepChange={setStep}
+        onStartToInstall={handleStartToInstall}
+        setIsInstalling={setIsInstalling}
         allPlugins={fromDSLPayload}
         onClose={onClose}
       />

web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx

@@ -9,6 +9,8 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
   allPlugins: Dependency[]
   onClose: () => void
   isFromMarketPlace?: boolean
@@ -17,6 +19,8 @@ type Props = {
 const ReadyToInstall: FC<Props> = ({
   step,
   onStepChange,
+  onStartToInstall,
+  setIsInstalling,
   allPlugins,
   onClose,
   isFromMarketPlace,
@@ -27,13 +31,15 @@ const ReadyToInstall: FC<Props> = ({
     setInstallStatus(installStatus)
     setInstalledPlugins(plugins)
     onStepChange(InstallStep.installed)
-  }, [onStepChange])
+    setIsInstalling(false)
+  }, [onStepChange, setIsInstalling])
   return (
     <>
       {step === InstallStep.readyToInstall && (
         <Install
           allPlugins={allPlugins}
           onCancel={onClose}
+          onStartToInstall={onStartToInstall}
           onInstalled={handleInstalled}
           isFromMarketPlace={isFromMarketPlace}
         />

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -12,6 +12,7 @@ const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   allPlugins: Dependency[]
+  onStartToInstall?: () => void
   onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
   onCancel: () => void
   isFromMarketPlace?: boolean
@@ -20,6 +21,7 @@ type Props = {
 
 const Install: FC<Props> = ({
   allPlugins,
+  onStartToInstall,
   onInstalled,
   onCancel,
   isFromMarketPlace,
@@ -65,6 +67,7 @@ const Install: FC<Props> = ({
     },
   })
   const handleInstall = () => {
+    onStartToInstall?.()
     installOrUpdate({
       payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
       plugin: selectedPlugins,