Merge branch '297-a-loading-button-while-exporting' into 'main'

Resolve "A loading button while exporting"

See merge request !254

CHANGELOG

 minerva-front (18.0.0~beta.5) stable; urgency=medium
+  * Small improvements: there is a waiting spinner after clicking on download
+    button (#297)
   * Small improvements: when exporting map as image provide default selections
     in for format and submap  (#295)
   * Small improvements: dropdown sections in exporting map as image are

public/config.js

 window.config = {
-  BASE_API_URL: 'https://lux1.atcomp.pl/minerva/api',
-  BASE_NEW_API_URL: 'https://lux1.atcomp.pl/minerva/new_api/',
-  BASE_MAP_IMAGES_URL: 'https://lux1.atcomp.pl/',
+  BASE_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/api',
+  BASE_NEW_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/new_api/',
+  BASE_MAP_IMAGES_URL: 'https://minerva-dev.lcsb.uni.lu/',
   DEFAULT_PROJECT_ID: 'sample',
-  ADMIN_PANEL_URL: 'https://lux1.atcomp.pl/minerva/admin.xhtml',
+  ADMIN_PANEL_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/admin.xhtml',
 };

src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx

-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { Button } from '@/shared/Button';
+import Image from 'next/image';
+import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
 import { ExportContext } from '../ExportCompound.context';
 
 export const DownloadElements = (): React.ReactNode => {
   const { handleDownloadElements } = useContext(ExportContext);
+  const [downloadingElements, setDownloadingElements] = useState<boolean>(false);
+
+  const handleDownloadElementsWrapper = async (): Promise<void> => {
+    setDownloadingElements(true);
+    await handleDownloadElements();
+    setDownloadingElements(false);
+  };
 
   return (
     <div className="mt-6">
-      <Button onClick={handleDownloadElements}>Download</Button>
+      <Button onClick={handleDownloadElementsWrapper}>
+        {downloadingElements && (
+          <Image
+            src={spinnerIcon}
+            alt="spinner icon"
+            height={12}
+            width={12}
+            className="mr-2 animate-spin"
+          />
+        )}
+        Download
+      </Button>
     </div>
   );
 };

src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx

-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { Button } from '@/shared/Button';
+import Image from 'next/image';
+import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
 import { ExportContext } from '../ExportCompound.context';
 
 export const DownloadNetwork = (): React.ReactNode => {
   const { handleDownloadNetwork } = useContext(ExportContext);
+  const [downloadingNetwork, setDownloadingNetwork] = useState<boolean>(false);
+
+  const handleDownloadNetworkWrapper = async (): Promise<void> => {
+    setDownloadingNetwork(true);
+    await handleDownloadNetwork();
+    setDownloadingNetwork(false);
+  };
 
   return (
     <div className="mt-6">
-      <Button onClick={handleDownloadNetwork}>Download</Button>
+      <Button onClick={handleDownloadNetworkWrapper}>
+        {downloadingNetwork && (
+          <Image
+            src={spinnerIcon}
+            alt="spinner icon"
+            height={12}
+            width={12}
+            className="mr-2 animate-spin"
+          />
+        )}
+        Download
+      </Button>
     </div>
   );
 };

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx

@@ -52,8 +52,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       includedCompartmentPathways,
       excludedCompartmentPathways,
     });
-
-    dispatch(downloadElements(body));
+    await dispatch(downloadElements(body));
   }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]);
 
   const handleDownloadNetwork = useCallback(async () => {
@@ -65,7 +64,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       excludedCompartmentPathways,
     });
 
-    dispatch(downloadNetwork(data));
+    await dispatch(downloadNetwork(data));
   }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]);
 
   const handleDownloadGraphics = useCallback(async () => {

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts

@@ -54,8 +54,8 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
   setModels: () => {},
   setImageSize: () => {},
   setImageFormats: () => {},
-  handleDownloadElements: () => {},
-  handleDownloadNetwork: () => {},
+  handleDownloadElements: () => Promise.resolve(),
+  handleDownloadNetwork: () => Promise.resolve(),
   handleDownloadGraphics: () => {},
   data: {
     annotations: [],

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts

@@ -8,8 +8,8 @@ export type ExportContextType = {
   setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
   setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
   setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
-  handleDownloadElements: () => void;
-  handleDownloadNetwork: () => void;
+  handleDownloadElements: () => Promise<void>;
+  handleDownloadNetwork: () => Promise<void>;
   handleDownloadGraphics: () => void;
   data: {
     annotations: CheckboxItem[];