ryan/feat(ux: create input loading spinner)

app/(main)/league/all/page.tsx

@@ -8,6 +8,8 @@ import { LeagueCard } from '@/components/LeagueCard/LeagueCard';
 import { ILeague } from '@/api/apiFunctions.interface';
 import { getUserLeagues } from '@/utils/utils';
 import { useDataStore } from '@/store/dataStore';
+import { getGameWeek } from '@/api/apiFunctions';
+import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import { ENTRY_URL, LEAGUE_URL } from '@/const/global';
 
 /**
@@ -56,9 +58,7 @@ const Leagues = (): JSX.Element => {
           ))
         ) : (
           <div className="text-center">
-            <p className="text-lg font-bold">
-              You are not enrolled in any leagues
-            </p>
+            <LoadingSpinner height="max-h-32 h-32" />
           </div>
         )}
       </section>

components/LeagueCard/LeagueCard.tsx

@@ -23,7 +23,7 @@ const LeagueCard = React.forwardRef<HTMLAnchorElement, ILeagueCardProps>(
       data-testid="LeagueCard"
       href={href}
       className={cn(
-        'LeagueCard flex max-h-32 place-items-center gap-6 rounded-lg border bg-card p-4 text-card-foreground shadow-sm dark:border-zinc-800 hover:bg-zinc-800 transition',
+        'LeagueCard flex max-h-32 h-32 place-items-center gap-6 rounded-lg border bg-card p-4 text-card-foreground shadow-sm dark:border-zinc-800',
       )}
       ref={ref}
     >

components/LoadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import React, { JSX } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface ILoadingSpinnerProps {
+  height?: string;
+  width?: string;
+}
+/**
+ * Renders a loading spinner.
+ * @param {ILoadingSpinnerProps} props - The props for the loading spinner component.
+ * @param {string} props.height - The height of the loading spinner. This should be the same tailwind class as the element it is standing in for.
+ * @param {string} props.width - The width of the loading spinner. This should be the same tailwind class as the element it is standing in for.
+ * @returns {JSX.Element} The rendered loading spinner component.
+ */
+const LoadingSpinner = ({
+  height,
+  width,
+}: ILoadingSpinnerProps): JSX.Element => {
+  return (
+    <div
+      role="alert"
+      tabIndex={-1}
+      className={cn(
+        'loading-spinner-container w-full h-full place-content-center text-center',
+        height,
+        width,
+      )}
+    >
+      <div
+        className="loading-spinner w-12 h-12 mx-auto rounded-full border-4 border-t-muted-foreground border-foreground animate-spin motion-reduces:hidden"
+        data-testid="loading-spinner"
+      />
+      <p className="sr-only motion-reduce:not-sr-only">Loading</p>
+    </div>
+  );
+};
+
+export default LoadingSpinner;