From 5161009e56115efb251d30ca8c692777563fc8b8 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 26 Sep 2023 18:38:09 +0700
Subject: [PATCH] Added progress spinner to the theme upload button (#18358)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

- Added a progress spinner to the theme upload button in AdminX for
better UX.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 68bfc1b</samp>

Improved user feedback for theme upload feature. Added a loading
indicator to the `ThemeModal` component to show the progress of the
`uploadTheme` function.
---
 .../src/components/settings/site/ThemeModal.tsx          | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index b754e7558c..c6aedea908 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -47,6 +47,8 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
 
     const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>();
 
+    const [isUploading, setUploading] = useState(false);
+
     useEffect(() => {
         if (limiter) {
             // Sending a bad string to make sure it fails (empty string isn't valid)
@@ -76,8 +78,11 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
         let data: ThemesInstallResponseType | undefined;
 
         try {
+            setUploading(true);
             data = await uploadTheme({file});
+            setUploading(false);
         } catch (e) {
+            setUploading(false);
             handleError(e);
         }
 
@@ -170,7 +175,9 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                                     okRunningLabel: 'Overwriting...',
                                     okColor: 'red',
                                     onOk: async (confirmModal) => {
+                                        setUploading(true);
                                         await handleThemeUpload({file, onActivate: onClose});
+                                        setUploading(false);
                                         setCurrentTab('installed');
                                         confirmModal?.remove();
                                     }
@@ -180,7 +187,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                                 handleThemeUpload({file, onActivate: onClose});
                             }
                         }}>
-                            <Button color='black' label='Upload theme' tag='div' />
+                            <Button color='black' label='Upload theme' loading={isUploading} tag='div' />
                         </FileUpload> :
                         <Button color='black' label='Upload theme' onClick={() => {
                             NiceModal.show(LimitModal, {