From d03561d61c0e39f173cdc0d8cb22eacbab3d741f Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Mon, 17 Apr 2023 20:54:30 +0200
Subject: [PATCH] enhancement(web): log download spinner icon (#847)

replace loading dots with spinner and move text to title for it display at mouseover
---
 web/src/components/Icons.tsx |  4 ++++
 web/src/screens/Logs.tsx     | 45 ++++++------------------------------
 2 files changed, 11 insertions(+), 38 deletions(-)

diff --git a/web/src/components/Icons.tsx b/web/src/components/Icons.tsx
index a5c4da3..be8a93b 100644
--- a/web/src/components/Icons.tsx
+++ b/web/src/components/Icons.tsx
@@ -15,3 +15,7 @@ export const SortUpIcon = ({ className }: IconProps) => (
 export const SortDownIcon = ({ className }: IconProps) => (
   <svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>
 );
+
+export const RingResizeSpinner = ({ className }: IconProps) => (
+  <svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="3" strokeLinecap="round" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="12" r="9.5" fill="none"><animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+);
diff --git a/web/src/screens/Logs.tsx b/web/src/screens/Logs.tsx
index cdd1c60..dafe906 100644
--- a/web/src/screens/Logs.tsx
+++ b/web/src/screens/Logs.tsx
@@ -14,6 +14,7 @@ import {
 import { useQuery } from "react-query";
 import { Menu, Transition } from "@headlessui/react";
 import { baseUrl } from "../utils";
+import { RingResizeSpinner } from "@/components/Icons";
 
 
 type LogEvent = {
@@ -148,7 +149,7 @@ export const Logs = () => {
 
       <div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 sm:px-6 pt-3 sm:pt-4">
-            <LogFiles />
+          <LogFiles />
         </div>
       </div>
 
@@ -208,38 +209,6 @@ interface LogFilesItemProps {
   file: LogFile;
 }
 
-const Dots = () => {
-  const [step, setStep] = useState(1);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setStep((prevStep) => (prevStep % 3) + 1);
-    }, 300);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="flex">
-      <div
-        className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
-          step === 1 ? "opacity-100" : "opacity-30"
-        }`}
-      />
-      <div
-        className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
-          step === 2 ? "opacity-100" : "opacity-30"
-        }`}
-      />
-      <div
-        className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
-          step === 3 ? "opacity-100" : "opacity-30"
-        }`}
-      />
-    </div>
-  );
-};
-
 const LogFilesItem = ({ file }: LogFilesItemProps) => {
   const [isDownloading, setIsDownloading] = useState(false);
 
@@ -279,7 +248,7 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
                 "text-gray-900 dark:text-gray-300",
                 "font-medium group flex rounded-md items-center px-2 py-2 text-sm"
               )}
-              title="Download file"
+              title={!isDownloading ? "Download file" : "Sanitizing log..."}
               onClick={handleDownload}
             >
               {!isDownloading ? (
@@ -288,10 +257,10 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
                   aria-hidden="true"
                 />
               ) : (
-                <div className="h-5 flex items-center">
-                  <span className="sanitizing-text">Sanitizing log</span>
-                  <Dots />
-                </div>
+                <RingResizeSpinner
+                  className="text-blue-500 w-5 h-5 iconHeight"
+                  aria-hidden="true"
+                />
               )}
             </button>
           </div>