From 0f9dc452a2b752c54d903eb9a28972e425bf7f2c Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 10 Oct 2024 08:51:25 +0200
Subject: [PATCH] add spinner to download
---
CHANGELOG | 2 ++
public/config.js | 8 +++----
.../DownloadElements/DownloadElements.tsx | 24 +++++++++++++++++--
.../DownloadNetwork/DownloadNetwork.tsx | 24 +++++++++++++++++--
.../ExportCompound.component.tsx | 5 ++--
.../ExportCompound/ExportCompound.constant.ts | 4 ++--
.../ExportCompound/ExportCompound.types.ts | 4 ++--
7 files changed, 56 insertions(+), 15 deletions(-)
diff --git a/CHANGELOG b/CHANGELOG
index 6be2d083..9d55b629 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,4 +1,6 @@
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)
diff --git a/public/config.js b/public/config.js
index dfe787a7..21e90e50 100644
--- a/public/config.js
+++ b/public/config.js
@@ -1,7 +1,7 @@
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',
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx
index 53276caa..8a987f80 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx
@@ -1,13 +1,33 @@
-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>
);
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
index 8e0fb25d..8097900e 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
@@ -1,13 +1,33 @@
-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>
);
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
index 52bc3732..f5803c10 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
+++ b/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 () => {
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
index a07ae4c5..5a7e4f08 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
+++ b/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: [],
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
index b6e70397..02c87101 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
+++ b/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[];
--
GitLab