From d179bde3485f6ae4a20ade4e0f2d9c79aecf9599 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Fri, 13 Jan 2023 02:40:24 +0100
Subject: [PATCH] fix overlapping download button and pending spinner

---
 .../pages/available-versions-list.components.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index 29ebefdb..38ef85c1 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -7,7 +7,6 @@ import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
-import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function AvailableVersionsList() {
 
@@ -15,12 +14,15 @@ export function AvailableVersionsList() {
   const versionManagerService: BSVersionManagerService = BSVersionManagerService.getInstance();
 
   const [versionSelected, setVersionSelected] = useState(null as BSVersion);
-  const currentVersionDownloading = useObservable(bsDownloaderService.currentBsVersionDownload$);
+  const [downloading, setDownloading] = useState(false);
   const t = useTranslation();
 
-   const startDownload = () => {
-      bsDownloaderService.download(versionSelected, versionManagerService.isVersionInstalled(versionSelected));
-   }
+    const startDownload = () => {
+        setDownloading(() => true)
+        bsDownloaderService.download(versionSelected, versionManagerService.isVersionInstalled(versionSelected)).finally(() => {
+            setDownloading(() => false);
+        });
+    }
 
   useEffect(() => {
     const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
@@ -40,7 +42,7 @@ export function AvailableVersionsList() {
       <AvailableVersionsSlider/>
 
       <AnimatePresence>
-        { versionSelected && !currentVersionDownloading && (
+        { versionSelected && !downloading && (
           <motion.div initial={{y:"150%"}} animate={{y:"0%"}} exit={{y:"150%"}} className="absolute bottom-5" onClick={startDownload}>
             <BsmButton text={versionManagerService.isVersionInstalled(versionSelected) ? "misc.verify" : "misc.download"} className="relative text-gray-800 dark:text-gray-100 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
           </motion.div>