From 3cd2e3ee3ae506288a91fc38ccfc2e2d3aeb31e2 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Wed, 8 Jun 2022 21:56:53 +0200
Subject: [PATCH] transition between download states

---
 .../available-versions-list.components.tsx    | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index 4073ab7a..44837611 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -3,6 +3,8 @@ import { BsDownloaderService } from "../services/bs-downloader.service";
 import { Slideshow } from "renderer/components/slideshow/slideshow.component";
 import { useEffect, useState } from "react";
 import { BSVersion } from "main/services/bs-version-manager.service";
+import beatWaitingImg from "../../../assets/beat-waiting.png";
+import beatRunningImg from "../../../assets/beat-running.png"
 
 export function AvailableVersionsList() {
 
@@ -21,10 +23,21 @@ export function AvailableVersionsList() {
   const [currentDownload, setCurrentDownload] = useState(null as BSVersion);
   const [downloadProgress, setDownloadProgress] = useState(0);
 
+  const [downloadPending, setDownloadPending] = useState(false);
+  const [tempProgress, setTempProgress] = useState(0);
+
   const startInstall = () => {
     bsDownloaderService.download();
   }
 
+  const startTest = () => {
+    setDownloadPending(true);
+    setTimeout(() => setTempProgress(10), 5000);
+    setTimeout(() => {
+      setDownloadPending(false); setTempProgress(0); setVersionSelected(null);
+    }, 10000)
+  }
+
   useEffect(() => {
     const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
       setVersionSelected(version);
@@ -51,8 +64,25 @@ export function AvailableVersionsList() {
       <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
       <h1 className="text-gray-100 text-2xl mb-4 z-[1]">Select a Version</h1>
       <AvailableVersionsSlider/>
-      <div className={`flex items-center content-center justify-center h-10 w-36 absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-md shadow-gray-800 cursor-pointer transition-all duration-300 ${!versionSelected && !currentDownload && "translate-y-[100px]"}`}>
-        <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl">DOWNLOAD</span>
+      <div onClick={startTest} className={
+        `
+          flex items-center content-center justify-center absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-center shadow-black cursor-pointer transition-all duration-300
+          ${versionSelected && !currentDownload && !downloadPending && "h-16 w-36"} 
+          ${!versionSelected && !currentDownload && "translate-y-[100px]"}
+          ${downloadPending && !tempProgress && "h-16 w-16 rounded-full"}
+          ${downloadPending && !!tempProgress && "h-5 w-3/4 rounded-full p-[6px]"}
+        `
+        }>
+        {downloadPending && !!tempProgress && (
+          <>
+            <div className="h-full w-full rounded-full overflow-hidden bg-main-color-1">
+              <div className="w-full h-full rounded-full download-progress -translate-x-full" style={{transform: `translate(-${100 - tempProgress}%, 0)`}}></div>
+            </div>
+            <img className="h-20 absolute -translate-x-8 -translate-y-1" style={{left: `${tempProgress}%`}} src={beatRunningImg} />
+          </>
+        )}
+        {!downloadPending && <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl text-center leading-6">DOWNLOAD {versionSelected?.BSVersion}</span>}
+        {downloadPending && !tempProgress && <img className="w-14 h-14 spin-loading" src={beatWaitingImg}></img>}
       </div>
     </div>
   )