From c2cab407f3a07c1d3073e936c9d23cb1cecc9cb9 Mon Sep 17 00:00:00 2001
From: Sriram Hariharan <sghsri@gmail.com>
Date: Fri, 4 Oct 2024 21:22:19 -0500
Subject: [PATCH] feat: add skeleton loader for course description +
 distribution (#267)

* feat: add skeleton loading for course description

* feat: added to distribution
---
 .../injected/CourseCatalogInjectedPopup/Description.tsx      | 5 +++--
 .../CourseCatalogInjectedPopup/GradeDistribution.tsx         | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
index a385230d7..eccf5cdf8 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
+++ b/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 => {
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
index aa9121969..273910900 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/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}