v1.0.3

package.json

@@ -5,12 +5,12 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/lab": "^5.0.0-alpha.163",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.15.15",
     "@mui/x-date-pickers": "^7.3.1",
     "@shaggytools/nhtsa-api-wrapper": "^3.0.4",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.13",
     "exif-library": "^2.0.0-alpha.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
@@ -36,7 +36,7 @@
     "eject": "react-scripts eject",
     "postbuild": "cp ./openapi.yml ./build",
     "test": "react-scripts test",
-    "test:ci": "TZ=UTC CI=true react-scripts test --passWithNoTests --coverage",
+    "test:ci": "TZ=UTC CI=true react-scripts test --passWithNoTests --coverage --maxWorkers=2 --maxConcurrent=2",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "lint:ci": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings 0",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx src",
@@ -77,7 +77,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",
     "typescript": "^5.4.3"
   },

src/components/Loader/index.test.tsx

@@ -0,0 +1,51 @@
+import { render, waitFor } from "@testing-library/react";
+import Loader from "./index";
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it("should render without crashing", () => {
+    expect(() => render(<Loader />)).not.toThrow();
+  });
+
+  it("should render as fullscreen by default", () => {
+    const { getByTestId } = render(<Loader />);
+
+    expect(getByTestId("loader-wrapper")).toHaveStyle("position: fixed");
+  });
+
+  it("should render within the parent when fullscreen is false", () => {
+    const { getByTestId } = render(<Loader fullscreen={false} />);
+
+    expect(getByTestId("loader-wrapper")).toHaveStyle("position: absolute");
+  });
+
+  it("should not show delay text by default", () => {
+    jest.useFakeTimers();
+
+    const { getByTestId } = render(<Loader delayTextTimeout={1000} />);
+
+    expect(getByTestId("loader-delay-text")).not.toBeVisible();
+
+    jest.advanceTimersByTime(1500);
+
+    expect(getByTestId("loader-delay-text")).not.toBeVisible();
+  });
+
+  it("should show delay text after the specified timeout", async () => {
+    jest.useFakeTimers();
+
+    const { getByTestId, getByText } = render(<Loader showDelayText delayTextTimeout={1000} />);
+
+    expect(getByTestId("loader-delay-text")).not.toBeVisible();
+
+    jest.advanceTimersByTime(1500);
+
+    await waitFor(() => expect(getByTestId("loader-delay-text")).toBeVisible());
+
+    expect(getByText(/This is taking longer than expected.../)).toBeInTheDocument();
+  });
+});

src/components/Loader/index.tsx

@@ -1,7 +1,9 @@
-import React, { FC } from "react";
-import { Box, CircularProgress, Theme, styled } from "@mui/material";
+import { FC, memo, useState } from "react";
+import { Box, CircularProgress, Theme, Typography, styled } from "@mui/material";
+import { isEqual } from "lodash";
+import { useTimeout } from "usehooks-ts";
 
-const StyledBox = styled(Box, {
+const StyledWrapperBox = styled(Box, {
   shouldForwardProp: (p) => p !== "fullscreen",
 })(({ fullscreen, theme }: { fullscreen: boolean; theme?: Theme }) => ({
   display: "flex",
@@ -16,10 +18,69 @@ const StyledBox = styled(Box, {
   background: theme?.palette.background.default || "#fff",
 }));
 
-const Loader: FC<{ fullscreen?: boolean }> = ({ fullscreen = true }) => (
-  <StyledBox fullscreen={fullscreen}>
-    <CircularProgress />
-  </StyledBox>
+const StyledInnerContainer = styled(Box)({
+  textAlign: "center",
+});
+
+const StyledIcon = styled(CircularProgress)(({ theme }: { theme?: Theme }) => ({
+  color: theme?.palette.text.primary,
+}));
+
+const StyledDelayText = styled(Typography, { shouldForwardProp: (p) => p !== "visible" })(
+  ({ theme, visible }: { visible: boolean; theme?: Theme }) => ({
+    color: theme?.palette.text.primary,
+    visibility: visible ? "visible" : "hidden",
+    fontSize: "14px",
+    height: "21px",
+    marginBottom: "-21px",
+  })
 );
 
-export default Loader;
+export type LoaderProps = {
+  /**
+   * Optional specification for whether to render as fullscreen (fixed)
+   * or within the container (absolute).
+   *
+   * @default true
+   */
+  fullscreen?: boolean;
+  /**
+   * Optional adornment text to show when the loader is visible for
+   * longer than expected.
+   *
+   * @default false
+   */
+  showDelayText?: boolean;
+  /**
+   * Optional specification for how long to wait before showing the
+   * loader adornment (in milliseconds)
+   *
+   * @default 2000
+   */
+  delayTextTimeout?: number;
+};
+
+const Loader: FC<LoaderProps> = ({
+  fullscreen = true,
+  showDelayText = false,
+  delayTextTimeout = 2000,
+}: LoaderProps) => {
+  const [delayVisible, setDelayVisible] = useState<boolean>(false);
+
+  const setVisible = () => showDelayText && setDelayVisible(true);
+
+  useTimeout(setVisible, delayTextTimeout);
+
+  return (
+    <StyledWrapperBox fullscreen={fullscreen} data-testid="loader-wrapper">
+      <StyledInnerContainer>
+        <StyledIcon data-testid="loader-icon" />
+        <StyledDelayText variant="body1" data-testid="loader-delay-text" visible={delayVisible}>
+          This is taking longer than expected...
+        </StyledDelayText>
+      </StyledInnerContainer>
+    </StyledWrapperBox>
+  );
+};
+
+export default memo<LoaderProps>(Loader, isEqual);

src/pages/lists/List.tsx

@@ -182,7 +182,7 @@ const ListView: FC<Props> = ({ uuid }: Props) => {
   };
 
   if (status === ListLookupStatus.Loading) {
-    return <Loader />;
+    return <Loader showDelayText />;
   }
 
   if (status === ListLookupStatus.Error || !list) {

src/pages/profile/View.tsx

@@ -239,7 +239,7 @@ const View: FC<Props> = ({ uuid }: Props) => {
   };
 
   if (profileStatus === ProfileProviderStatus.Loading) {
-    return <Loader />;
+    return <Loader showDelayText />;
   }
 
   if (profileStatus === ProfileProviderStatus.Error || !profile) {

src/pages/vehicle/View.tsx

@@ -157,7 +157,7 @@ const View: FC<Props> = ({ vin }: Props) => {
   };
 
   if (status === VehicleProviderStatus.LOADING) {
-    return <Loader />;
+    return <Loader showDelayText />;
   }
 
   if (status === VehicleProviderStatus.ERROR || !vehicle || !editVehicle) {