From f8eea11a5fdcde106dbe00ab77f8e165d35757af Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Mon, 23 Oct 2023 23:11:38 +1100
Subject: [PATCH] add loading indicator

---
 interface/src/pages/Themes.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/interface/src/pages/Themes.tsx b/interface/src/pages/Themes.tsx
index 620e9cf3..4b576ca2 100644
--- a/interface/src/pages/Themes.tsx
+++ b/interface/src/pages/Themes.tsx
@@ -182,6 +182,8 @@ const handlePresetClick = async (bg: Background): Promise<void> => {
     setSelectedBackground(null);
     localStorage.removeItem('selectedBackground');
   };
+
+  const calcCircumference = (radius: number) => 2 * Math.PI * radius;
   
   useEffect(() => {
     loadBackgrounds();
@@ -224,14 +226,16 @@ const handlePresetClick = async (bg: Background): Promise<void> => {
             onClick={() => handlePresetClick(bg)}
             className='relative w-16 h-16 transition cursor-pointer rounded-xl'>
             {bg.isPreset && downloadProgress[bg.id] !== undefined && (
-              <div className="absolute top-0 left-0 z-20 h-1 bg-blue-500" style={{ width: `${downloadProgress[bg.id]}%` }}></div>
+              <div className="absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full">
+                <svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
+                  <circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
+                  <circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (downloadProgress[bg.id] / 100))}`} transform="rotate(-90 18 18)"></circle>
+                </svg>
+              </div>
             )}
             <div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center">
               <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
-                
-              </span>
-              <span className="absolute text-3xl text-black transition opacity-0 blur-sm font-IconFamily group-hover:opacity-100">
-                
+                {downloadProgress[bg.id] === undefined ? '' : ''}
               </span>
             </div>
             <img