Fix loading jumping

UTDNebula · Dec 3, 2024 · d0ca5f7 · d0ca5f7
1 parent 567bfda
commit d0ca5f7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 29 deletions.
diff --git a/src/components/CourseOverview.tsx b/src/components/CourseOverview.tsx
@@ -1,3 +1,4 @@
+import { Skeleton } from '@mui/material';
 import React from 'react';
 
 import { TRENDS_URL } from '~data/config';
@@ -11,23 +12,28 @@ type CourseOverviewProps = {
 
 const CourseOverview = ({ course, grades }: CourseOverviewProps) => {
   return (
-    <div className="flex flex-col gap-2">
-      <p className="text-2xl font-bold text-center">
+    <div className="flex flex-col items-center gap-2">
+      <p className="text-2xl font-bold">
         {searchQueryLabel(course)}
       </p>
-      {grades.state === 'done' && (
-        <p className="text-lg font-semibold text-center">
-          {'Overall grade: ' + grades.data.letter_grade}
-        </p>
-      )}
+      {(grades.state === 'loading' && (
+        <Skeleton variant="rounded">
+          <p className="text-lg font-semibold">Overall grade: A+</p>
+        </Skeleton>
+      )) ||
+        (grades.state === 'done' && (
+          <p className="text-lg font-semibold">
+            {'Overall grade: ' + grades.data.letter_grade}
+          </p>
+        ))}
       <a
         href={
           TRENDS_URL +
           'dashboard?searchTerms=' +
           encodeURIComponent(searchQueryLabel(course))
         }
         target="_blank"
-        className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600 text-center"
+        className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
         rel="noreferrer"
       >
         See on Trends

diff --git a/src/components/SearchResultsTable.tsx b/src/components/SearchResultsTable.tsx
@@ -117,16 +117,16 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
             </IconButton>
           </Tooltip>
         </TableCell>
-        <TableCell align="right" className="border-b-0">
+        <TableCell align="center" className="border-b-0">
           {((typeof grades === 'undefined' || grades.state === 'error') &&
             (((typeof backupGrades === 'undefined' ||
               backupGrades.state === 'error') && <></>) ||
               (backupGrades.state === 'loading' && (
                 <Skeleton
                   variant="rounded"
-                  className="rounded-full px-5 py-2 ml-auto"
+                  className="rounded-full px-5 py-2 w-16 block mx-auto"
                 >
-                  <Typography className="text-base">A</Typography>
+                  <Typography className="text-base w-6">A+</Typography>
                 </Skeleton>
               )) ||
               (backupGrades.state === 'done' && (
@@ -155,7 +155,7 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
                     }
                   >
                     <Typography
-                      className="text-base text-black rounded-full px-5 py-2 inline"
+                      className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                       sx={{
                         backgroundColor: gpaToColor(backupGrades.data.gpa),
                       }}
@@ -168,9 +168,9 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
             (grades.state === 'loading' && (
               <Skeleton
                 variant="rounded"
-                className="rounded-full px-5 py-2 ml-auto"
+                className="rounded-full px-5 py-2 w-16 block mx-auto"
               >
-                <Typography className="text-base">A</Typography>
+                <Typography className="text-base w-6">A+</Typography>
               </Skeleton>
             )) ||
             (grades.state === 'done' && (
@@ -179,7 +179,7 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
                 placement="top"
               >
                 <Typography
-                  className="text-base text-black rounded-full px-5 py-2 inline"
+                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                   sx={{ backgroundColor: gpaToColor(grades.data.gpa) }}
                 >
                   {grades.data.letter_grade}
@@ -188,10 +188,10 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
             )) ||
             null}
         </TableCell>
-        <TableCell align="right" className="border-b-0">
+        <TableCell align="center" className="border-b-0">
           {((typeof rmp === 'undefined' || rmp.state === 'error') && <></>) ||
             (rmp.state === 'loading' && (
-              <Skeleton variant="rounded" className="rounded-full ml-auto">
+              <Skeleton variant="rounded" className="rounded-full">
                 <Rating sx={{ fontSize: 25 }} readOnly />
               </Skeleton>
             )) ||

diff --git a/src/components/SingleProfInfo.tsx b/src/components/SingleProfInfo.tsx
@@ -16,29 +16,34 @@ function SingleProfInfo({ rmp }: Props) {
     return (
       <Grid container spacing={2} className="p-4">
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Professor rating</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Difficulty</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">1,000</p>
+          </Skeleton>
           <p>Ratings given</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">99%</p>
+          </Skeleton>
           <p>Would take again</p>
         </Grid>
+        <Grid item xs={12}>
+          <Skeleton variant="rounded">
+            <p>Visit Rate My Professors</p>
+          </Skeleton>
+        </Grid>
       </Grid>
     );
   }