From c154718b6cf25560132b66a99c7d6b5ef1959205 Mon Sep 17 00:00:00 2001
From: Jonathan Berger <drskullster@pm.me>
Date: Wed, 12 Mar 2025 17:33:38 +0100
Subject: [PATCH] Fix spinner in action buttons

Fixes a FOUC (flash of unstyled content) on page load for the create and update buttons

Change-type: patch
---
 src/components/RJST/Actions/Create.tsx | 19 +++++++++------
 src/components/RJST/Actions/Update.tsx | 32 ++++++++++++++++++--------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/RJST/Actions/Create.tsx b/src/components/RJST/Actions/Create.tsx
index 2cafbc83..60f4719f 100644
--- a/src/components/RJST/Actions/Create.tsx
+++ b/src/components/RJST/Actions/Create.tsx
@@ -10,8 +10,7 @@ import { getCreateDisabledReason } from '../utils';
 import { ActionContent, LOADING_DISABLED_REASON } from './ActionContent';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagic } from '@fortawesome/free-solid-svg-icons/faMagic';
-import { Box, Button } from '@mui/material';
-import { Spinner } from '../../Spinner';
+import { Box, Button, CircularProgress } from '@mui/material';
 import { useTranslation } from '../../../hooks/useTranslations';
 import { Tooltip } from '../../Tooltip';
 
@@ -91,12 +90,18 @@ export const Create = <T extends RJSTBaseResource<T>>({
 							}));
 						}}
 					>
-						<Box display="flex" justifyContent="space-between">
+						<Box
+							display="flex"
+							justifyContent="space-between"
+							alignItems="center"
+						>
 							{action.title}
-							<Spinner
-								sx={{ ml: 2 }}
-								show={disabledReason === LOADING_DISABLED_REASON}
-							/>
+							{disabledReason === LOADING_DISABLED_REASON && (
+								<CircularProgress
+									size="1rem"
+									sx={{ ml: 2, color: 'currentcolor' }}
+								/>
+							)}
 						</Box>
 					</ActionContent>
 				</Button>
diff --git a/src/components/RJST/Actions/Update.tsx b/src/components/RJST/Actions/Update.tsx
index 986bdab0..cd33e477 100644
--- a/src/components/RJST/Actions/Update.tsx
+++ b/src/components/RJST/Actions/Update.tsx
@@ -12,10 +12,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare';
 import type { CheckedState } from '../components/Table/utils';
 import { useTranslation } from '../../../hooks/useTranslations';
-import { Box, Button, useMediaQuery, useTheme } from '@mui/material';
+import {
+	Box,
+	Button,
+	CircularProgress,
+	useMediaQuery,
+	useTheme,
+} from '@mui/material';
 import type { DropDownButtonProps } from '../../DropDownButton';
 import { DropDownButton } from '../../DropDownButton';
-import { Spinner } from '../../Spinner';
 import { Tooltip } from '../../Tooltip';
 
 interface UpdateProps<T extends RJSTBaseResource<T>> {
@@ -101,6 +106,7 @@ export const Update = <T extends RJSTBaseResource<T>>({
 						<Box
 							display="flex"
 							justifyContent="space-between"
+							alignItems="center"
 							gap={2}
 							color={
 								action.isDangerous && !disabledReasonsByAction[action.title]
@@ -109,9 +115,9 @@ export const Update = <T extends RJSTBaseResource<T>>({
 							}
 						>
 							{action.title}
-							<Spinner
-								show={disabledActionReason === LOADING_DISABLED_REASON}
-							/>
+							{disabledActionReason === LOADING_DISABLED_REASON && (
+								<CircularProgress size="1rem" sx={{ color: 'currentcolor' }} />
+							)}
 						</Box>
 					</ActionContent>
 				),
@@ -209,12 +215,18 @@ export const Update = <T extends RJSTBaseResource<T>>({
 								}));
 							}}
 						>
-							<Box display="flex" justifyContent="space-between">
+							<Box
+								display="flex"
+								justifyContent="space-between"
+								alignItems="center"
+							>
 								{action.title}
-								<Spinner
-									sx={{ ml: 2 }}
-									show={disabledUpdateReason === LOADING_DISABLED_REASON}
-								/>
+								{disabledUpdateReason === LOADING_DISABLED_REASON && (
+									<CircularProgress
+										size="1rem"
+										sx={{ ml: 2, color: 'currentcolor' }}
+									/>
+								)}
 							</Box>
 						</ActionContent>
 					</Button>