feat: add button ogp-spinner

frontend/src/assets/svgrs/brand/OgpLogo.tsx

@@ -0,0 +1,33 @@
+import { SVGProps } from 'react'
+
+export const OgpLogo = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      fill="none"
+      {...props}
+    >
+      <mask
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="4"
+        width="9"
+        height="24"
+      >
+        <path d="M2.3 4H10.8V28H2.3V4Z" fill="#CCC" />
+      </mask>
+      <g mask="url(#mask0)">
+        <path
+          d="M10.7 25.6C10.8 25.4 10.8 25.3 10.7 25.1 10.7 25 10.6 24.8 10.5 24.8 7.7 22.9 5.9 19.7 5.9 16 5.9 12.3 7.7 9.1 10.5 7.2 10.6 7.2 10.7 7 10.7 6.9 10.8 6.7 10.8 6.6 10.7 6.4L9.5 4.3C9.4 4.2 9.4 4.2 9.3 4.1 9.3 4.1 9.2 4 9.1 4 9 4 8.9 4 8.9 4 8.8 4 8.7 4.1 8.6 4.1 4.8 6.6 2.3 11 2.3 16 2.3 21 4.8 25.4 8.6 27.9 8.7 27.9 8.8 28 8.9 28 8.9 28 9 28 9.1 28 9.2 28 9.3 27.9 9.3 27.9 9.4 27.8 9.4 27.8 9.5 27.7L10.7 25.6Z"
+          fill="currentColor"
+        />
+      </g>
+      <path
+        d="M22.6 4.3L21.5 6.4C21.4 6.6 21.4 6.7 21.4 6.9 21.4 7 21.5 7.2 21.6 7.2 24.4 9.1 26.3 12.3 26.3 16 26.3 19.7 24.4 22.9 21.6 24.8 21.5 24.8 21.4 25 21.4 25.1 21.4 25.3 21.4 25.4 21.5 25.6L22.6 27.7C22.7 27.8 22.7 27.8 22.8 27.9 22.9 27.9 23 28 23 28 23.1 28 23.2 28 23.3 28 23.4 28 23.4 27.9 23.5 27.9 27.3 25.4 29.8 21 29.8 16 29.8 11 27.3 6.6 23.5 4.1 23.4 4.1 23.4 4 23.3 4 23.2 4 23.1 4 23 4 23 4 22.9 4.1 22.8 4.1 22.7 4.2 22.7 4.2 22.6 4.3"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

frontend/src/components/Button/Button.tsx

@@ -4,6 +4,11 @@ import {
   forwardRef,
   IconProps,
 } from '@chakra-ui/react'
+import { useGrowthBook } from '@growthbook/growthbook-react'
+
+import { featureFlags } from '~shared/constants'
+
+import { OgpLogo } from '~assets/svgrs/brand/OgpLogo'
 
 import Spinner from '../Spinner'
 
@@ -30,10 +35,28 @@ export const Button = forwardRef<ButtonProps, 'button'>(
     { children, spinnerFontSize, isFullWidth, isHighContrast, ...props },
     ref,
   ) => {
+    const gb = useGrowthBook()
+
+    // Ensures compatibility between Chakra size definitions and those supported by the SVG logo
+    const spinnerSize =
+      typeof spinnerFontSize === 'string' || typeof spinnerFontSize === 'number'
+        ? spinnerFontSize
+        : '1.5rem'
+
+    const spinner = gb?.isOn(featureFlags.ogpSpinner) ? (
+      <Spinner
+        fontSize={spinnerFontSize ?? '1.5rem'}
+        speed="1s"
+        element={<OgpLogo height={spinnerSize} fill="primary" />}
+      />
+    ) : (
+      <Spinner fontSize={spinnerFontSize ?? '1.5rem'} />
+    )
+
     return (
       <ChakraButton
         ref={ref}
-        spinner={<Spinner fontSize={spinnerFontSize ?? '1.5rem'} />}
+        spinner={spinner}
         width={isFullWidth ? '100%' : undefined}
         {...props}
         {...(isFullWidth ? { minH: '3.5rem' } : {})}

frontend/src/components/Spinner/Spinner.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BiLoader } from 'react-icons/bi'
 import {
+  Box,
   Flex,
   FlexProps,
   Icon,
@@ -30,6 +31,11 @@ interface SpinnerProps extends FlexProps {
    */
   label?: string
 
+  /**
+   * Custom spinner element. If not provided, a default spinner icon will be used.
+   */
+  element?: JSX.Element
+
   /**
    * Font size of the spinner.
    */
@@ -50,6 +56,7 @@ export const Spinner = ({
   color = 'inherit',
   label: userSpecifiedLabel,
   fontSize = '1rem',
+  element,
   ...flexProps
 }: SpinnerProps): JSX.Element => {
   const { t } = useTranslation()
@@ -66,12 +73,16 @@ export const Spinner = ({
   return (
     <Flex color={color} align="center" {...flexProps}>
       {label && <VisuallyHidden>{label}</VisuallyHidden>}
-      <Icon
-        animation={animation}
-        as={BiLoader}
-        fontSize={fontSize}
-        aria-label="Spinner icon"
-      />
+      {element ? (
+        <Box animation={animation}>{element}</Box>
+      ) : (
+        <Icon
+          animation={animation}
+          as={BiLoader}
+          fontSize={fontSize}
+          aria-label="Spinner icon"
+        />
+      )}
     </Flex>
   )
 }

shared/constants/feature-flags.ts

@@ -28,4 +28,5 @@ export const featureFlags = {
   singpassMrf: 'singpass-mrf' as const,
   enableSaveDraftButtonFloating: 'enable-save-draft-button-floating' as const,
   enableSaveDraftButtonHeader: 'enable-save-draft-button-header' as const,
+  ogpSpinner: 'ogp-spinner' as const,
 }