olly/queueful
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes & spin global icon

Browse Source
This commit is contained in:
Olly Hearn
2024-04-20 17:59:17 +03:00
parent f80431aba0
commit 227f1c5782
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/app/src/components/AuthModal.tsx
View File

@ -44,8 +44,10 @@ const AuthModal = (props: {
const [captchaId, setCaptchaId] = useState(""); const [captchaId, setCaptchaId] = useState("");
const [captchaPic, setCaptchaPic] = useState(""); const [captchaPic, setCaptchaPic] = useState("");
const [captchaFetching, setCaptchaFetching] = useState(false);
const fetchCaptcha = async () => { const fetchCaptcha = async () => {
setCaptchaFetching(true);
registerForm.setFieldValue(["captcha", "prompt"], ""); registerForm.setFieldValue(["captcha", "prompt"], "");
const id = uuidv4(); const id = uuidv4();
setCaptchaId(id); setCaptchaId(id);
@ -53,6 +55,7 @@ const AuthModal = (props: {
const imageBlob = await res.blob(); const imageBlob = await res.blob();
const imageObjectURL = URL.createObjectURL(imageBlob); const imageObjectURL = URL.createObjectURL(imageBlob);
setCaptchaPic(imageObjectURL); setCaptchaPic(imageObjectURL);
setCaptchaFetching(false);
}; };
const { data, refetch, isFetching, isError } = useGetUserQuery({}); const { data, refetch, isFetching, isError } = useGetUserQuery({});
@ -149,10 +152,7 @@ const AuthModal = (props: {
okText={current === "login" ? tr("Log in") : tr("Register")} okText={current === "login" ? tr("Log in") : tr("Register")}
confirmLoading={isLoggingIn} confirmLoading={isLoggingIn}
> >
<Spin <Spin spinning={isLoggingIn || isRegistering}>
spinning={isLoggingIn || isRegistering}
indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
>
<div <div
style={{ display: "flex", width: "100%", justifyContent: "center" }} style={{ display: "flex", width: "100%", justifyContent: "center" }}
> >
@ -262,12 +262,14 @@ const AuthModal = (props: {
<Input type="password" /> <Input type="password" />
</Form.Item> </Form.Item>
<Form.Item label={tr("Captcha")}> <Form.Item label={tr("Captcha")}>
{captchaPic ? ( {captchaId ? (
<img <Spin spinning={captchaFetching}>
onClick={() => fetchCaptcha()} <img
src={captchaPic} onClick={() => fetchCaptcha()}
alt={tr("Click to refresh")} src={captchaPic}
/> alt={tr("Captcha")}
/>
</Spin>
) : ( ) : (
<Button <Button
onClick={() => fetchCaptcha()} onClick={() => fetchCaptcha()}

4
frontend/app/src/config/ThemeProviderWrapper.tsx
View File

@ -1,12 +1,14 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { StorePrototype } from "./store"; import { StorePrototype } from "./store";
import { ConfigProvider } from "antd"; import { ConfigProvider, Spin } from "antd";
import { darkTheme, lightTheme } from "./style"; import { darkTheme, lightTheme } from "./style";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { LoadingOutlined } from "@ant-design/icons";
const ThemeProviderWrapper = ({ children }: { children: ReactNode }) => { const ThemeProviderWrapper = ({ children }: { children: ReactNode }) => {
const theme = useSelector((state: StorePrototype) => state.settings.theme); const theme = useSelector((state: StorePrototype) => state.settings.theme);
Spin.setDefaultIndicator(<LoadingOutlined style={{ fontSize: 36 }} spin />);
return ( return (
<ConfigProvider theme={theme === "dark" ? darkTheme : lightTheme}> <ConfigProvider theme={theme === "dark" ? darkTheme : lightTheme}>