add spiner (fetch in memory and download from memory)

Closes #297 (closed)

src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx

@@ -2,18 +2,34 @@ import { formatsHandlersSelector } from '@/redux/configuration/configuration.sel
 import { Button } from '@/shared/Button';
 import { useSelect } from 'downshift';
 import { useSelector } from 'react-redux';
+import Image from 'next/image';
+import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
+import { useState } from 'react';
+import { downloadFileFromUrl } from '@/redux/export/export.utils';
 import { SUBMAP_DOWNLOAD_HANDLERS_NAMES } from './DownloadSubmap.constants';
 import { useGetSubmapDownloadUrl } from './utils/useGetSubmapDownloadUrl';
 
-export const DownloadSubmap = (): JSX.Element => {
+export const DownloadSubmap = (): React.ReactNode => {
   const formatsHandlers = useSelector(formatsHandlersSelector);
   const formatsHandlersItems = Object.entries(formatsHandlers);
   const getSubmapDownloadUrl = useGetSubmapDownloadUrl();
 
-  const { isOpen, getToggleButtonProps, getMenuProps } = useSelect({
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+  const { isOpen, getToggleButtonProps, getMenuProps, closeMenu } = useSelect({
     items: formatsHandlersItems,
   });
 
+  const downloadSubmap = (handler: string) => {
+    return function () {
+      closeMenu();
+      setIsDownloading(true);
+      downloadFileFromUrl(getSubmapDownloadUrl({ handler })).finally(function () {
+        setIsDownloading(false);
+      });
+    };
+  };
+
   return (
     <div className="relative">
       <Button
@@ -22,6 +38,15 @@ export const DownloadSubmap = (): JSX.Element => {
         className="mr-4"
         {...getToggleButtonProps()}
       >
+        {isDownloading && (
+          <Image
+            src={spinnerIcon}
+            alt="spinner icon"
+            height={12}
+            width={12}
+            className="mr-5 animate-spin"
+          />
+        )}
         Download
       </Button>
       <ul
@@ -34,14 +59,13 @@ export const DownloadSubmap = (): JSX.Element => {
         {isOpen &&
           formatsHandlersItems.map(([formatId, handler]) => (
             <li key={formatId}>
-              <a
-                className="flex flex-col border-t px-4 py-2 shadow-sm"
-                href={getSubmapDownloadUrl({ handler })}
-                target="_blank"
-                download
+              <Button
+                variantStyles="ghost"
+                className="flex w-full flex-col border-t px-4 py-2 shadow-sm"
+                onClick={downloadSubmap(handler)}
               >
-                <span>{SUBMAP_DOWNLOAD_HANDLERS_NAMES[formatId]}</span>
-              </a>
+                {SUBMAP_DOWNLOAD_HANDLERS_NAMES[formatId]}
+              </Button>
             </li>
           ))}
       </ul>