From 227f1c5782cf0a17513c7e1182b5f2d46bbd2e57 Mon Sep 17 00:00:00 2001
From: Olly Hearn <longcat512@gmail.com>
Date: Sat, 20 Apr 2024 17:59:17 +0300
Subject: [PATCH] fixes & spin global icon

---
 frontend/app/src/components/AuthModal.tsx     | 22 ++++++++++---------
 .../app/src/config/ThemeProviderWrapper.tsx   |  4 +++-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/app/src/components/AuthModal.tsx b/frontend/app/src/components/AuthModal.tsx
index 720365e..b91c59b 100644
--- a/frontend/app/src/components/AuthModal.tsx
+++ b/frontend/app/src/components/AuthModal.tsx
@@ -44,8 +44,10 @@ const AuthModal = (props: {
 
   const [captchaId, setCaptchaId] = useState("");
   const [captchaPic, setCaptchaPic] = useState("");
+  const [captchaFetching, setCaptchaFetching] = useState(false);
 
   const fetchCaptcha = async () => {
+    setCaptchaFetching(true);
     registerForm.setFieldValue(["captcha", "prompt"], "");
     const id = uuidv4();
     setCaptchaId(id);
@@ -53,6 +55,7 @@ const AuthModal = (props: {
     const imageBlob = await res.blob();
     const imageObjectURL = URL.createObjectURL(imageBlob);
     setCaptchaPic(imageObjectURL);
+    setCaptchaFetching(false);
   };
 
   const { data, refetch, isFetching, isError } = useGetUserQuery({});
@@ -149,10 +152,7 @@ const AuthModal = (props: {
       okText={current === "login" ? tr("Log in") : tr("Register")}
       confirmLoading={isLoggingIn}
     >
-      <Spin
-        spinning={isLoggingIn || isRegistering}
-        indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
-      >
+      <Spin spinning={isLoggingIn || isRegistering}>
         <div
           style={{ display: "flex", width: "100%", justifyContent: "center" }}
         >
@@ -262,12 +262,14 @@ const AuthModal = (props: {
               <Input type="password" />
             </Form.Item>
             <Form.Item label={tr("Captcha")}>
-              {captchaPic ? (
-                <img
-                  onClick={() => fetchCaptcha()}
-                  src={captchaPic}
-                  alt={tr("Click to refresh")}
-                />
+              {captchaId ? (
+                <Spin spinning={captchaFetching}>
+                  <img
+                    onClick={() => fetchCaptcha()}
+                    src={captchaPic}
+                    alt={tr("Captcha")}
+                  />
+                </Spin>
               ) : (
                 <Button
                   onClick={() => fetchCaptcha()}
diff --git a/frontend/app/src/config/ThemeProviderWrapper.tsx b/frontend/app/src/config/ThemeProviderWrapper.tsx
index 6798350..e168c97 100644
--- a/frontend/app/src/config/ThemeProviderWrapper.tsx
+++ b/frontend/app/src/config/ThemeProviderWrapper.tsx
@@ -1,12 +1,14 @@
 import React, { ReactNode } from "react";
 import { useSelector } from "react-redux";
 import { StorePrototype } from "./store";
-import { ConfigProvider } from "antd";
+import { ConfigProvider, Spin } from "antd";
 import { darkTheme, lightTheme } from "./style";
 import PropTypes from "prop-types";
+import { LoadingOutlined } from "@ant-design/icons";
 
 const ThemeProviderWrapper = ({ children }: { children: ReactNode }) => {
   const theme = useSelector((state: StorePrototype) => state.settings.theme);
+  Spin.setDefaultIndicator(<LoadingOutlined style={{ fontSize: 36 }} spin />);
 
   return (
     <ConfigProvider theme={theme === "dark" ? darkTheme : lightTheme}>