Hotfix downloading a package zip (#4634)

Author: fiskus

catalog/CHANGELOG.md

@@ -18,6 +18,7 @@ where verb is one of
 
 ## Changes
 
+- [Fixed] Prevent package download form from being prematurely removed from DOM ([#4634](https://github.com/quiltdata/quilt/pull/4634))
 - [Fixed] Remove leading slash when creating a file from the root directory ([#4631](https://github.com/quiltdata/quilt/pull/4631))
 - [Fixed] Remove leading slash from code samples for downloading an S3 directory ([#4631](https://github.com/quiltdata/quilt/pull/4631))
 - [Fixed] Handle invalid URLs in Markdown gracefully ([#4630](https://github.com/quiltdata/quilt/pull/4630))

catalog/app/containers/Bucket/Dir/Toolbar/Get/Options.tsx

@@ -52,7 +52,7 @@ function DownloadDir({ dirHandle }: DownloadDirProps) {
         event.stopPropagation()
         setDownloading(true)
       }}
-      startIcon={downloading ? <M.CircularProgress size={20} /> : undefined}
+      {...(downloading ? { startIcon: <M.CircularProgress size={20} /> } : null)}
     >
       Download ZIP (directory)
     </Buttons.DownloadDir>

catalog/app/containers/Bucket/Download/PackageOptions.tsx

@@ -38,8 +38,21 @@ function DownloadDir({ selection, uri }: DownloadDirProps) {
     () => selection && Selection.toHandlesList(selection),
     [selection],
   )
+  const [downloading, setDownloading] = React.useState(false)
+  React.useEffect(() => {
+    if (!downloading) return
+    setTimeout(() => setDownloading(false), 1000)
+  }, [downloading])
   return (
-    <Buttons.DownloadDir suffix={downloadPath} fileHandles={fileHandles}>
+    <Buttons.DownloadDir
+      suffix={downloadPath}
+      fileHandles={fileHandles}
+      onClick={(event) => {
+        event.stopPropagation()
+        setDownloading(true)
+      }}
+      {...(downloading ? { startIcon: <M.CircularProgress size={20} /> } : null)}
+    >
       {downloadLabel}
     </Buttons.DownloadDir>
   )