fixes & spin global icon

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 ? (
+              {captchaId ? (
+                <Spin spinning={captchaFetching}>
                   <img
                     onClick={() => fetchCaptcha()}
                     src={captchaPic}
-                  alt={tr("Click to refresh")}
+                    alt={tr("Captcha")}
                   />
+                </Spin>
               ) : (
                 <Button
                   onClick={() => fetchCaptcha()}

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}>