Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix loading jumping #296

Merged
merged 5 commits into from
Nov 11, 2024
Merged

Fix loading jumping #296

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c29760c
Fix jumping
TyHil Oct 31, 2024
2784021
Migrate to grid v2
TyHil Oct 31, 2024
75caade
Merge branch 'develop' into loading-jumping
TyHil Nov 8, 2024
d2b751c
Fix for #291
TyHil Nov 8, 2024
05e9be9
Better width solution
TyHil Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions src/components/common/SearchResultsTable/searchResultsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,21 @@ function LoadingRow() {
<TableCell>
<Checkbox disabled />
</TableCell>
<TableCell component="th" scope="row">
<Typography className="w-[20ch] leading-tight text-lg text-gray-600 dark:text-gray-200">
<TableCell component="th" scope="row" className="w-full">
<Typography className="w-full leading-tight text-lg">
<Skeleton />
</Typography>
</TableCell>
<TableCell align="right">
<Skeleton variant="rounded" className="rounded-full px-5 py-2 ml-auto">
<Typography className="text-base">4.00</Typography>
<TableCell align="center">
<Skeleton
variant="rounded"
className="rounded-full px-5 py-2 w-16 block mx-auto"
>
<Typography className="text-base w-6">A+</Typography>
TyHil marked this conversation as resolved.
Show resolved Hide resolved
</Skeleton>
</TableCell>
<TableCell align="right">
<Skeleton variant="rounded" className="rounded-full ml-auto">
<TableCell align="center">
<Skeleton variant="rounded" className="rounded-full mx-auto">
<Rating sx={{ fontSize: 25 }} readOnly />
</Skeleton>
</TableCell>
Expand Down Expand Up @@ -116,10 +119,9 @@ function Row({
<>
<TableRow
onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
sx={{ '& > *': { borderBottom: 'unset' } }}
className="cursor-pointer"
>
<TableCell>
<TableCell className="border-b-0">
<Tooltip
title={open ? 'Minimize Result' : 'Expand Result'}
placement="top"
Expand All @@ -134,7 +136,7 @@ function Row({
</IconButton>
</Tooltip>
</TableCell>
<TableCell>
<TableCell className="border-b-0">
<Tooltip
title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
placement="top"
Expand All @@ -156,12 +158,12 @@ function Row({
/>
</Tooltip>
</TableCell>
<TableCell component="th" scope="row">
<TableCell component="th" scope="row" className="w-full border-b-0">
<Typography
onClick={
(e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
}
className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text"
className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text w-fit"
>
{searchQueryLabel(course) +
((typeof course.profFirst === 'undefined' &&
Expand All @@ -172,16 +174,16 @@ function Row({
: '')}
</Typography>
</TableCell>
<TableCell align="right">
<TableCell align="center" className="border-b-0">
{((typeof grades === 'undefined' || grades.state === 'error') && (
<></>
)) ||
(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' && (
Expand All @@ -190,7 +192,7 @@ function Row({
placement="top"
>
<Typography
className="text-base text-black text-center rounded-full px-5 py-2 w-16 block"
className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
sx={{ backgroundColor: gpaToColor(grades.data.gpa) }}
>
{gpaToLetterGrade(grades.data.gpa)}
Expand All @@ -199,10 +201,10 @@ function Row({
)) ||
null}
</TableCell>
<TableCell align="right">
<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>
)) ||
Expand Down
49 changes: 27 additions & 22 deletions src/components/common/SingleProfInfo/singleProfInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Grid, Skeleton } from '@mui/material';
import { Grid2 as Grid, Skeleton } from '@mui/material';
import Link from 'next/link';
import React from 'react';

Expand All @@ -16,56 +16,61 @@ function SingleProfInfo({ rmp }: Props) {
if (rmp.state === 'loading') {
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>
<Grid size={6}>
<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>
<Grid size={6}>
<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>
<Grid size={6}>
<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>
<Grid size={6}>
<Skeleton variant="rounded">
<p className="text-xl font-bold">99%</p>
</Skeleton>
<p>Would take again</p>
</Grid>
<Grid size={12}>
<Skeleton variant="rounded">
<p>Visit Rate My Professors</p>
</Skeleton>
</Grid>
</Grid>
);
}
return (
<Grid container spacing={2} className="p-4">
<Grid item xs={6}>
<Grid size={6}>
<p className="text-xl font-bold">{rmp.data.avgRating}</p>
<p>Professor rating</p>
</Grid>
<Grid item xs={6}>
<Grid size={6}>
<p className="text-xl font-bold">{rmp.data.avgDifficulty}</p>
<p>Difficulty</p>
</Grid>
<Grid item xs={6}>
<Grid size={6}>
<p className="text-xl font-bold">
{rmp.data.numRatings.toLocaleString()}
</p>
<p>Ratings given</p>
</Grid>
<Grid item xs={6}>
<Grid size={6}>
<p className="text-xl font-bold">
{rmp.data.wouldTakeAgainPercent.toFixed(0) + '%'}
</p>
<p>Would take again</p>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Link
href={
'https://www.ratemyprofessors.com/professor/' + rmp.data.legacyId
Expand Down
10 changes: 5 additions & 5 deletions src/pages/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, Grid } from '@mui/material';
import { Card, Grid2 as Grid } from '@mui/material';
import type { NextPage } from 'next';
import Head from 'next/head';
import { useRouter } from 'next/router';
Expand Down Expand Up @@ -746,18 +746,18 @@ export const Dashboard: NextPage = () => {
contentComponent = (
<>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={6}>
<Grid size={{ xs: 12, sm: 6, md: 6 }}>
<Filters
manageQuery
academicSessions={academicSessions}
chosenSessions={chosenSessions}
addChosenSessions={addChosenSessions}
/>
</Grid>
<Grid item xs={false} sm={6} md={6}></Grid>
<Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
</Grid>
<Grid container component="main" wrap="wrap-reverse" spacing={2}>
<Grid item xs={12} sm={6} md={6}>
<Grid size={{ xs: 12, sm: 6, md: 6 }}>
<SearchResultsTable
resultsLoading={results.state}
includedResults={includedResults}
Expand All @@ -768,7 +768,7 @@ export const Dashboard: NextPage = () => {
removeFromCompare={removeFromCompare}
/>
</Grid>
<Grid item xs={false} sm={6} md={6} className="w-full">
<Grid size={{ xs: false, sm: 6, md: 6 }}>
<div className="sticky top-0 gridsm:max-h-screen overflow-y-auto pt-4">
<Card>
<Carousel names={names} compareLength={compare.length}>
Expand Down
Loading