diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx index 27dfc2d114..5b59e4e1d1 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx @@ -1,5 +1,12 @@ import React from "react" -import { styled, Link, SimpleMenu, SimpleMenuItem, Stack } from "ol-components" +import { + styled, + Link, + SimpleMenu, + SimpleMenuItem, + Stack, + Skeleton, +} from "ol-components" import NextLink from "next/link" import { EnrollmentStatus, EnrollmentMode } from "./types" import type { DashboardCourse } from "./types" @@ -247,6 +254,7 @@ type DashboardCardProps = { courseNoun?: string offerUpgrade?: boolean contextMenuItems?: SimpleMenuItem[] + isLoading?: boolean } const DashboardCard: React.FC = ({ dashboardResource, @@ -256,10 +264,62 @@ const DashboardCard: React.FC = ({ courseNoun = "Course", offerUpgrade = true, contextMenuItems = [], + isLoading = false, }) => { const { title, marketingUrl, enrollment, run } = dashboardResource + const titleSection = isLoading ? ( + <> + + + + + ) : ( + <> + + {title} + + {enrollment?.status === EnrollmentStatus.Completed ? ( + + {} + View Certificate + + ) : null} + {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? ( + + ) : null} + + ) + const buttonSection = isLoading ? ( + + ) : ( + <> + + + + ) + const startDateSection = isLoading ? ( + + ) : run.startDate ? ( + + ) : null const menuItems = contextMenuItems.concat(getDefaultContextMenuItems(title)) - const contextMenu = ( + const contextMenu = isLoading ? ( + + ) : ( = ({ className={className} > - - {title} - - {enrollment?.status === EnrollmentStatus.Completed ? ( - - {} - View Certificate - - ) : null} - {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? ( - - ) : null} + {titleSection} - - + {buttonSection} {contextMenu} - {run.startDate ? ( - - ) : null} + {startDateSection} ) @@ -332,23 +364,7 @@ const DashboardCard: React.FC = ({ width="100%" > - - {title} - - {enrollment?.status === EnrollmentStatus.Completed ? ( - - {} - View Certificate - - ) : null} - {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? ( - - ) : null} + {titleSection} {contextMenu} @@ -358,23 +374,9 @@ const DashboardCard: React.FC = ({ justifyContent="space-between" width="100%" > - {run.startDate ? ( - - - - ) : null} + {startDateSection} - - + {buttonSection} diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx index c38600e53c..ec1bc1ceda 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx @@ -118,11 +118,13 @@ const sortEnrollments = (resources: DashboardCourse[]) => { interface EnrollmentExpandCollapseProps { shownEnrollments: DashboardCourse[] hiddenEnrollments: DashboardCourse[] + isLoading?: boolean } const EnrollmentExpandCollapse: React.FC = ({ shownEnrollments, hiddenEnrollments, + isLoading, }) => { const [shown, setShown] = React.useState(false) @@ -140,6 +142,7 @@ const EnrollmentExpandCollapse: React.FC = ({ Component="li" dashboardResource={course} showNotComplete={false} + isLoading={isLoading} /> ))} @@ -151,6 +154,7 @@ const EnrollmentExpandCollapse: React.FC = ({ Component="li" dashboardResource={course} showNotComplete={false} + isLoading={isLoading} /> ))} @@ -165,7 +169,7 @@ const EnrollmentExpandCollapse: React.FC = ({ } const EnrollmentDisplay = () => { - const { data: enrolledCourses } = useQuery({ + const { data: enrolledCourses, isLoading } = useQuery({ ...enrollmentQueries.coursesList(), select: mitxonlineEnrollments, }) @@ -192,6 +196,7 @@ const EnrollmentDisplay = () => { )