fix(striker-ui): style file edit form and add spinner when loading data

striker-ui/components/Files/FileEditForm.tsx

@@ -6,12 +6,13 @@ import {
 } from 'react';
 import { Box, Checkbox, checkboxClasses } from '@mui/material';
 
-import { GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 
 import FileInfo from './FileInfo';
 import fetchJSON from '../../lib/fetchers/fetchJSON';
 import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
 import StyledContainedButton from './StyledContainedButton';
+import Spinner from '../Spinner';
 
 type FileEditProps = {
   filesOverview: FileOverviewMetadata[];
@@ -24,6 +25,9 @@ type FileToEdit = FileDetailMetadata & {
 
 const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   const [filesToEdit, setFilesToEdit] = useState<FileToEdit[]>([]);
+  const [isLoadingFilesToEdit, setIsLoadingFilesToEdit] = useState<boolean>(
+    false,
+  );
 
   const generateFileInfoChangeHandler = (
     fileIndex: number,
@@ -73,6 +77,8 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   };
 
   useEffect(() => {
+    setIsLoadingFilesToEdit(true);
+
     Promise.all(
       filesOverview.map(async (fileOverview: FileOverviewMetadata) => {
         const fileToEdit: FileToEdit = {
@@ -114,12 +120,25 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
 
         return fileToEdit;
       }),
-    ).then((fetchedFilesDetail) => setFilesToEdit(fetchedFilesDetail));
+    ).then((fetchedFilesDetail) => {
+      setFilesToEdit(fetchedFilesDetail);
+      setIsLoadingFilesToEdit(false);
+    });
   }, [filesOverview]);
 
   return (
+    <>
+      {isLoadingFilesToEdit ? (
+        <Spinner />
+      ) : (
         <form onSubmit={editFiles}>
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              '& > :not(:first-child)': { marginTop: '1em' },
+            }}
+          >
             {filesToEdit.map(
               ({ fileName, fileLocations, fileType, fileUUID }, fileIndex) => (
                 <Box
@@ -132,6 +151,7 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
                     },
                   }}
                 >
+                  <Box sx={{ marginTop: '.4em' }}>
                     <Checkbox
                       onChange={({ target: { checked } }) => {
                         filesToEdit[fileIndex].isSelected = checked;
@@ -144,6 +164,7 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
                         },
                       }}
                     />
+                  </Box>
                   <FileInfo
                     {...{ fileName, fileType, fileLocations }}
                     onChange={generateFileInfoChangeHandler(fileIndex)}
@@ -152,15 +173,35 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
               ),
             )}
             {filesToEdit.length > 0 && (
-          <Box sx={{ display: 'flex', flexDirection: 'row' }}>
-            <StyledContainedButton onClick={purgeFiles}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-end',
+                  '& > :not(:last-child)': {
+                    marginRight: '.5em',
+                  },
+                }}
+              >
+                <StyledContainedButton
+                  onClick={purgeFiles}
+                  sx={{
+                    backgroundColor: RED,
+                    color: TEXT,
+                    '&:hover': { backgroundColor: RED },
+                  }}
+                >
                   Purge
                 </StyledContainedButton>
-            <StyledContainedButton type="submit">Update</StyledContainedButton>
+                <StyledContainedButton type="submit">
+                  Update
+                </StyledContainedButton>
               </Box>
             )}
           </Box>
         </form>
+      )}
+    </>
   );
 };
 

striker-ui/components/Files/StyledContainedButton.tsx

@@ -15,9 +15,10 @@ const StyledButton = styled(Button)({
 const StyledContainedButton = ({
   children,
   onClick,
+  sx,
   type,
 }: ButtonProps): JSX.Element => (
-  <StyledButton {...{ onClick, type }} variant="contained">
+  <StyledButton {...{ onClick, sx, type }} variant="contained">
     {children}
   </StyledButton>
 );