feat: add a configurable delay to OakLoadingSpinner

can be used to defer rendering of the spinner for pending UI that might
render with no perceptible delay

src/components/molecules/OakLoadingSpinner/OakLoadingSpinner.stories.tsx

@@ -13,10 +13,11 @@ const meta: Meta<typeof OakLoadingSpinner> = {
   argTypes: {
     ...sizeArgTypes,
     ...colorArgTypes,
+    $delay: { control: { type: "range", min: 0, max: 5000 } },
   },
   parameters: {
     controls: {
-      include: ["$width", "$color", "$background"],
+      include: ["$width", "$color", "$background", "$delay"],
     },
   },
 };

src/components/molecules/OakLoadingSpinner/OakLoadingSpinner.test.tsx

@@ -25,4 +25,12 @@ describe("OakLoadingSpinner", () => {
     const { getByDisplayValue } = render(<OakLoadingSpinner />);
     expect(() => getByDisplayValue("accessible text")).toThrow();
   });
+
+  it("can have a delayed appearance", () => {
+    const { getByTestId } = render(
+      <OakLoadingSpinner data-testid="loader" $delay={300} />,
+    );
+
+    expect(getByTestId("loader")).toHaveStyleRule("animation-delay", "0.3s");
+  });
 });

src/components/molecules/OakLoadingSpinner/OakLoadingSpinner.tsx

@@ -18,8 +18,25 @@ const SpinnerKeyframe = keyframes`
   }
 `;
 
+const DelayedShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
 export type OakLoadingSpinnerProps = Pick<SizeStyleProps, "$width"> &
-  ColorStyleProps & { loaderColor?: OakCombinedColorToken };
+  ColorStyleProps & {
+    loaderColor?: OakCombinedColorToken;
+    /**
+     * Delay the appearance of the spinner
+     *
+     * Accepts a number in milliseconds
+     */
+    $delay?: number;
+  };
 
 const StyledLoadingSpinner = styled.span<OakLoadingSpinnerProps>`
   ${(props) =>
@@ -28,6 +45,16 @@ const StyledLoadingSpinner = styled.span<OakLoadingSpinnerProps>`
       : css`
           --width: 1.25rem;
         `}
+  ${({ $delay }) => {
+    if ($delay) {
+      return css`
+        opacity: 0;
+        animation: ${DelayedShow} 0s;
+        animation-delay: ${$delay / 1000}s;
+        animation-fill-mode: forwards;
+      `;
+    }
+  }}
   --inner-width: calc(var(--width) / 10 * 8);
   --thickness: calc(var(--width) / 12);