feat: add skeleton loader for course description + distribution (#267)

* feat: add skeleton loading for course description

* feat: added to distribution

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

@@ -5,6 +5,7 @@ import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import { SiteSupport } from '@views/lib/getSiteSupport';
 import clsx from 'clsx';
 import React from 'react';
+import Skeleton from 'react-loading-skeleton';
 
 interface DescriptionProps {
     course: Course;
@@ -60,8 +61,8 @@ export default function Description({ course }: DescriptionProps): JSX.Element {
                     Please refresh the page and log back in using your UT EID and password.
                 </Text>
             )}
-            {/* TODO (achadaga): would be nice to have a new spinner here */}
-            {status === LoadStatus.LOADING && <Spinner />}
+            {status === LoadStatus.LOADING &&
+                Array.from({ length: 5 }).map((_, i) => <Skeleton style={{ marginBottom: 10 }} height={35} />)}
             {status === LoadStatus.DONE && (
                 <ul className='ml-6 mt-1.5 list-disc list-outside space-y-1.5'>
                     {description.map(line => {

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

@@ -12,6 +12,7 @@ import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import type { ChangeEvent } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
 
 interface GradeDistributionProps {
     course: Course;
@@ -193,8 +194,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
 
     return (
         <div className='pt-3'>
-            {/* TODO (achadaga): again would be nice to have an updated spinner */}
-            {status === DataStatus.LOADING && <Spinner />}
+            {status === DataStatus.LOADING && <Skeleton height={300} />}
             {status === DataStatus.NOT_FOUND && (
                 <HighchartsReact
                     ref={ref}