From fdb1a5178a35a4c6416c0b2551e0e347467ba129 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 20 Oct 2021 15:36:48 +1100
Subject: [PATCH] add CircularProgressOptical

---
 src/components/CircularProgressOptical.tsx    | 19 ++++++++++++++++
 src/components/Loading.tsx                    | 12 ++++------
 src/components/Setup/SetupItem.tsx            | 10 +++------
 src/components/SnackbarProgress.tsx           |  7 +++---
 .../Table/TableHeader/ReExecute.tsx           |  4 ++--
 .../Table/TableHeader/TableLogs.tsx           | 11 +++++-----
 src/components/fields/Action/ActionFab.tsx    |  5 +++--
 .../fields/File/SideDrawerField.tsx           |  6 ++---
 src/components/fields/File/TableCell.tsx      | 14 +++---------
 .../fields/Image/SideDrawerField.tsx          | 12 +++-------
 src/components/fields/Image/TableCell.tsx     |  5 ++---
 src/pages/Test.tsx                            | 22 ++++++++++++++++++-
 12 files changed, 71 insertions(+), 56 deletions(-)
 create mode 100644 src/components/CircularProgressOptical.tsx

diff --git a/src/components/CircularProgressOptical.tsx b/src/components/CircularProgressOptical.tsx
new file mode 100644
index 00000000..be71800d
--- /dev/null
+++ b/src/components/CircularProgressOptical.tsx
@@ -0,0 +1,19 @@
+import { CircularProgress, CircularProgressProps } from "@mui/material";
+
+export default function CircularProgressOptical({
+  size = 40,
+  ...props
+}: CircularProgressProps & { size?: number }) {
+  const DEFAULT_SIZE = 40;
+  const DEFAULT_THICKNESS = 3.6;
+  const linearThickness = (DEFAULT_SIZE / size) * DEFAULT_THICKNESS;
+  const opticalRatio = 1 - (1 - size / DEFAULT_SIZE) / 2;
+
+  return (
+    <CircularProgress
+      {...props}
+      size={size}
+      thickness={linearThickness * opticalRatio}
+    />
+  );
+}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index fbe4127e..2ed9402f 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,12 +1,8 @@
 import { use100vh } from "react-div-100vh";
 
-import {
-  Fade,
-  Stack,
-  StackProps,
-  CircularProgress,
-  Typography,
-} from "@mui/material";
+import { Fade, Stack, StackProps, Typography } from "@mui/material";
+import CircularProgressOptical from "components/CircularProgressOptical";
+
 interface ILoadingProps extends Partial<StackProps> {
   message?: string;
   fullScreen?: boolean;
@@ -33,7 +29,7 @@ export default function Loading({
           ...props.style,
         }}
       >
-        <CircularProgress />
+        <CircularProgressOptical />
         <Typography
           variant="subtitle1"
           component="div"
diff --git a/src/components/Setup/SetupItem.tsx b/src/components/Setup/SetupItem.tsx
index 43be2dd6..160f16f3 100644
--- a/src/components/Setup/SetupItem.tsx
+++ b/src/components/Setup/SetupItem.tsx
@@ -1,6 +1,7 @@
-import { Stack, CircularProgress, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
 import ArrowIcon from "@mui/icons-material/ArrowForward";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 export interface ISetupItemProps {
   status: "complete" | "loading" | "incomplete";
@@ -25,12 +26,7 @@ export default function SetupItem({
       {status === "complete" ? (
         <CheckIcon aria-label="Item complete" color="action" />
       ) : status === "loading" ? (
-        <CircularProgress
-          id="progress"
-          size={20}
-          thickness={5}
-          sx={{ m: 0.25 }}
-        />
+        <CircularProgressOptical id="progress" size={20} sx={{ m: 0.25 }} />
       ) : (
         <ArrowIcon aria-label="Item" color="primary" />
       )}
diff --git a/src/components/SnackbarProgress.tsx b/src/components/SnackbarProgress.tsx
index 28cf9cd9..2be7986c 100644
--- a/src/components/SnackbarProgress.tsx
+++ b/src/components/SnackbarProgress.tsx
@@ -1,5 +1,7 @@
 import { useState, Dispatch, SetStateAction, MutableRefObject } from "react";
-import { Stack, CircularProgress } from "@mui/material";
+
+import { Stack } from "@mui/material";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 export interface ISnackbarProgressRef {
   setProgress: Dispatch<SetStateAction<number>>;
@@ -31,12 +33,11 @@ export default function SnackbarProgress({
         {progress}/{target}
       </span>
 
-      <CircularProgress
+      <CircularProgressOptical
         value={(progress / target) * 100}
         variant="determinate"
         size={24}
         color="inherit"
-        thickness={4}
       />
     </Stack>
   );
diff --git a/src/components/Table/TableHeader/ReExecute.tsx b/src/components/Table/TableHeader/ReExecute.tsx
index bfa5ccc5..a1f5af99 100644
--- a/src/components/Table/TableHeader/ReExecute.tsx
+++ b/src/components/Table/TableHeader/ReExecute.tsx
@@ -6,7 +6,7 @@ import LoopIcon from "@mui/icons-material/Loop";
 import { useProjectContext } from "contexts/ProjectContext";
 import { db } from "../../../firebase";
 import { isCollectionGroup } from "utils/fns";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 import Modal from "components/Modal";
 
@@ -61,7 +61,7 @@ export default function ReExecute() {
             primary: {
               children: "Confirm",
               onClick: handleConfirm,
-              startIcon: updating && <CircularProgress size={16} />,
+              startIcon: updating && <CircularProgressOptical size={16} />,
               disabled: updating,
             },
             secondary: {
diff --git a/src/components/Table/TableHeader/TableLogs.tsx b/src/components/Table/TableHeader/TableLogs.tsx
index 5e2764b0..4e5db568 100644
--- a/src/components/Table/TableHeader/TableLogs.tsx
+++ b/src/components/Table/TableHeader/TableLogs.tsx
@@ -12,7 +12,6 @@ import moment from "moment";
 import {
   Chip,
   Stack,
-  CircularProgress,
   Typography,
   Box,
   Tabs,
@@ -32,6 +31,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import TableHeaderButton from "./TableHeaderButton";
 import Ansi from "ansi-to-react";
 import EmptyState from "components/EmptyState";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 import PropTypes from "prop-types";
 import routes from "constants/routes";
@@ -244,7 +244,7 @@ function LogPanel(props) {
           })}
           <div ref={liveStreamingRef} id="live-stream-target">
             {status === "BUILDING" && (
-              <CircularProgress
+              <CircularProgressOptical
                 className={classes.logPanelProgress}
                 size={30}
               />
@@ -371,7 +371,7 @@ function SnackLog({ log, onClose, onOpenPanel }) {
             })}
             <div ref={liveStreamingRef} id="live-stream-target-snack">
               {status === "BUILDING" && (
-                <CircularProgress
+                <CircularProgressOptical
                   className={classes.logPanelProgress}
                   size={30}
                 />
@@ -427,10 +427,9 @@ export default function TableLogs() {
           <>
             <LogsIcon />
             {latestStatus === "BUILDING" && (
-              <CircularProgress
+              <CircularProgressOptical
                 className={classes.toolbarStatusIcon}
                 size={12}
-                thickness={6}
                 style={{ padding: 1 }}
               />
             )}
@@ -499,7 +498,7 @@ export default function TableLogs() {
                             style={{ textAlign: "left" }}
                           >
                             {logEntry.status === "BUILDING" && (
-                              <CircularProgress size={24} />
+                              <CircularProgressOptical size={24} />
                             )}
                             {logEntry.status === "SUCCESS" && <SuccessIcon />}
                             {logEntry.status === "FAIL" && <FailIcon />}
diff --git a/src/components/fields/Action/ActionFab.tsx b/src/components/fields/Action/ActionFab.tsx
index 949733f0..86dec038 100644
--- a/src/components/fields/Action/ActionFab.tsx
+++ b/src/components/fields/Action/ActionFab.tsx
@@ -2,10 +2,11 @@ import { useState } from "react";
 import _get from "lodash/get";
 import { useSnackbar } from "notistack";
 
-import { Fab, FabProps, CircularProgress } from "@mui/material";
+import { Fab, FabProps } from "@mui/material";
 import PlayIcon from "@mui/icons-material/PlayArrow";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import UndoIcon from "@mui/icons-material/Undo";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 import { useProjectContext } from "contexts/ProjectContext";
 import { functions } from "@src/firebase";
@@ -159,7 +160,7 @@ export default function ActionFab({
       {...props}
     >
       {isRunning ? (
-        <CircularProgress color="secondary" size={16} thickness={5.6} />
+        <CircularProgressOptical color="secondary" size={16} />
       ) : (
         getStateIcon(actionState)
       )}
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index 5cea9319..547fd9b3 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -15,12 +15,12 @@ import {
   Grid,
   Tooltip,
   Chip,
-  CircularProgress,
 } from "@mui/material";
 import UploadIcon from "assets/icons/Upload";
 import { FileIcon } from ".";
 
 import Confirmation from "components/Confirmation";
+import CircularProgressOptical from "components/CircularProgressOptical";
 import { DATE_TIME_FORMAT } from "constants/dates";
 
 import { useFieldStyles } from "components/SideDrawer/Form/utils";
@@ -148,9 +148,7 @@ function ControlledFileUploader({
             <Chip
               icon={<FileIcon />}
               label={localFile}
-              deleteIcon={
-                <CircularProgress size={20} thickness={4.5} color="inherit" />
-              }
+              deleteIcon={<CircularProgressOptical size={20} color="inherit" />}
             />
           </Grid>
         )}
diff --git a/src/components/fields/File/TableCell.tsx b/src/components/fields/File/TableCell.tsx
index 9d609556..dd37cc9f 100644
--- a/src/components/fields/File/TableCell.tsx
+++ b/src/components/fields/File/TableCell.tsx
@@ -6,17 +6,10 @@ import _findIndex from "lodash/findIndex";
 import { format } from "date-fns";
 
 import { makeStyles, createStyles } from "@mui/styles";
-import {
-  alpha,
-  Stack,
-  Grid,
-  Tooltip,
-  Chip,
-  IconButton,
-  CircularProgress,
-} from "@mui/material";
+import { alpha, Stack, Grid, Tooltip, Chip, IconButton } from "@mui/material";
 import UploadIcon from "assets/icons/Upload";
 import ChipList from "components/Table/formatters/ChipList";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 import { useConfirmation } from "components/ConfirmationDialog";
 import useUploader, { FileValue } from "hooks/useTable/useUploader";
@@ -184,11 +177,10 @@ export default function File_({
         )
       ) : (
         <div style={{ padding: 4 }}>
-          <CircularProgress
+          <CircularProgressOptical
             size={24}
             variant={progress === 0 ? "indeterminate" : "determinate"}
             value={progress}
-            thickness={4}
             style={{ display: "block" }}
           />
         </div>
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index d5275205..8968ffef 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -7,14 +7,7 @@ import { useDropzone } from "react-dropzone";
 import useUploader from "hooks/useTable/useUploader";
 
 import { makeStyles, createStyles } from "@mui/styles";
-import {
-  alpha,
-  ButtonBase,
-  Typography,
-  Grid,
-  CircularProgress,
-  Tooltip,
-} from "@mui/material";
+import { alpha, ButtonBase, Typography, Grid, Tooltip } from "@mui/material";
 
 import AddIcon from "@mui/icons-material/AddAPhotoOutlined";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
@@ -22,6 +15,7 @@ import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
 
 import { IMAGE_MIME_TYPES } from ".";
 import Thumbnail from "components/Thumbnail";
+import CircularProgressOptical from "components/CircularProgressOptical";
 import { useConfirmation } from "components/ConfirmationDialog";
 import { useProjectContext } from "contexts/ProjectContext";
 
@@ -247,7 +241,7 @@ function ControlledImageUploader({
                 alignItems="center"
                 className={classes.overlay}
               >
-                <CircularProgress
+                <CircularProgressOptical
                   color="inherit"
                   size={48}
                   variant={progress === 0 ? "indeterminate" : "determinate"}
diff --git a/src/components/fields/Image/TableCell.tsx b/src/components/fields/Image/TableCell.tsx
index 701c0658..965323b8 100644
--- a/src/components/fields/Image/TableCell.tsx
+++ b/src/components/fields/Image/TableCell.tsx
@@ -12,13 +12,13 @@ import {
   Grid,
   IconButton,
   ButtonBase,
-  CircularProgress,
   Tooltip,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/AddAPhotoOutlined";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
 
+import CircularProgressOptical from "components/CircularProgressOptical";
 import { useConfirmation } from "components/ConfirmationDialog";
 import useUploader, { FileValue } from "hooks/useTable/useUploader";
 import { IMAGE_MIME_TYPES } from "./index";
@@ -272,11 +272,10 @@ export default function Image_({
         )
       ) : (
         <div style={{ padding: 4 }}>
-          <CircularProgress
+          <CircularProgressOptical
             size={24}
             variant={progress === 0 ? "indeterminate" : "determinate"}
             value={progress}
-            thickness={4}
             style={{ display: "block" }}
           />
         </div>
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
index 68adf056..5511cae0 100644
--- a/src/pages/Test.tsx
+++ b/src/pages/Test.tsx
@@ -43,6 +43,7 @@ import { useConfirmation } from "components/ConfirmationDialog";
 import SnackbarProgress, {
   ISnackbarProgressRef,
 } from "components/SnackbarProgress";
+import CircularProgressOptical from "components/CircularProgressOptical";
 
 const typographyVariants = [
   "h1",
@@ -913,7 +914,26 @@ export default function TestView() {
             </Button>
           </Stack>
 
-          <CircularProgress />
+          <Stack spacing={1} direction="row" alignItems="flex-end">
+            {/* size 40 thickness 3.6 */}
+            <CircularProgress />
+            <CircularProgress size={30} thickness={4.2} />
+            <CircularProgress size={24} thickness={4.8} />
+            <CircularProgress size={20} thickness={5.4} />
+            <CircularProgress size={16} thickness={6.3} />
+            <CircularProgress size={12} thickness={7.8} />
+          </Stack>
+
+          <Stack spacing={1} direction="row" alignItems="flex-end">
+            {/* size 40 thickness 3.6 */}
+            <CircularProgressOptical />
+            <CircularProgressOptical size={30} />
+            <CircularProgressOptical size={24} />
+            <CircularProgressOptical size={20} />
+            <CircularProgressOptical size={16} />
+            <CircularProgressOptical size={12} />
+          </Stack>
+
           <LinearProgress />
         </Stack>
       </Container>