feat: github install add anim

web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -16,6 +16,8 @@ import Loaded from './steps/loaded'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
+import cn from '@/utils/classnames'
+import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installFromGitHub'
 
@@ -31,6 +33,13 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   const { fetchReleases } = useGitHubReleases()
   const { refreshPluginList } = useRefreshPluginList()
 
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
   const [state, setState] = useState<InstallState>({
     step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl,
     repoUrl: updatePayload?.originalPackageInfo?.repo
@@ -115,14 +124,16 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   const handleInstalled = useCallback(() => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
     refreshPluginList(manifest)
+    setIsInstalling(false)
     onSuccess()
-  }, [manifest, onSuccess, refreshPluginList])
+  }, [manifest, onSuccess, refreshPluginList, setIsInstalling])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed }))
+    setIsInstalling(false)
     if (errorMsg)
       setErrorMsg(errorMsg)
-  }, [])
+  }, [setIsInstalling])
 
   const handleBack = () => {
     setState((prevState) => {
@@ -140,9 +151,9 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   return (
     <Modal
       isShow={true}
-      onClose={onClose}
+      onClose={foldAnimInto}
-      className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px]
+      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'
+        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'>
@@ -195,6 +206,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
               selectedVersion={state.selectedVersion}
               selectedPackage={state.selectedPackage}
               onBack={handleBack}
+              onStartToInstall={handleStartToInstall}
               onInstalled={handleInstalled}
               onFailed={handleFailed}
             />

web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx

@@ -23,6 +23,7 @@ type LoadedProps = {
   selectedVersion: string
   selectedPackage: string
   onBack: () => void
+  onStartToInstall?: () => void
   onInstalled: () => void
   onFailed: (message?: string) => void
 }
@@ -37,6 +38,7 @@ const Loaded: React.FC<LoadedProps> = ({
   selectedVersion,
   selectedPackage,
   onBack,
+  onStartToInstall,
   onInstalled,
   onFailed,
 }) => {
@@ -59,11 +61,13 @@ const Loaded: React.FC<LoadedProps> = ({
   useEffect(() => {
     if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
       onInstalled()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasInstalled])
 
   const handleInstall = async () => {
     if (isInstalling) return
     setIsInstalling(true)
+    onStartToInstall?.()
 
     try {
       const { owner, repo } = parseGitHubUrl(repoUrl)