refactor: Update spinner design (#223)

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>
+    );
+}