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/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}