refactor: Update spinner design (#223)

src/stories/components/Spinner.stories.ts → src/stories/components/Spinner.stories.tsx

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 
 const meta = {
     title: 'Components/Common/Spinner',
     component: Spinner,
     tags: ['autodocs'],
-    argTypes: {},
+    parameters: {
+        layout: 'centered',
+    },
 } satisfies Meta<typeof Spinner>;
 
 export default meta;

src/views/components/common/Spinner.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+
+/**
+ * A simple spinner component that can be used to indicate loading.
+ */
+export default function Spinner({ className, ...rest }: SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <div
+            className={`will-change-transform animate-spin w-16 h-16 text-ut-orange ${className ?? ''}`}
+            style={{ animationDuration: '225ms' }}
+        >
+            <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...rest}>
+                <path
+                    fill='currentColor'
+                    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+                />
+            </svg>
+        </div>
+    );
+}

src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx

@@ -1,5 +1,5 @@
 import type { Course } from '@shared/types/Course';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 import Text from '@views/components/common/Text/Text';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import { SiteSupport } from '@views/lib/getSiteSupport';

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -1,7 +1,7 @@
 import type { Course } from '@shared/types/Course';
 import type { Distribution, LetterGrade } from '@shared/types/Distribution';
 import { extendedColors } from '@shared/types/ThemeColors';
-import Spinner from '@views/components/common/Spinner/Spinner';
+import Spinner from '@views/components/common/Spinner';
 import Text from '@views/components/common/Text/Text';
 import {
     NoDataError,