From 8680c7b7428be0e358fb98e7a7fafd92a4a6f78d Mon Sep 17 00:00:00 2001 From: Anniechika <79059777+Anniechika@users.noreply.github.com> Date: Tue, 18 Mar 2025 00:28:45 -0400 Subject: [PATCH 1/6] 196 - Temporarily loading style for the event page --- src/app/(pages)/events/loading.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/app/(pages)/events/loading.tsx diff --git a/src/app/(pages)/events/loading.tsx b/src/app/(pages)/events/loading.tsx new file mode 100644 index 00000000..41283dcd --- /dev/null +++ b/src/app/(pages)/events/loading.tsx @@ -0,0 +1,30 @@ +'use client'; +import React from 'react'; +import { Card, CardContent } from '@/components/ui/card'; +import BlockContainer from '@/components/BlockContainer'; +import Image from 'next/image'; + +export default function Loading() { + return ( +
+ +
+ {[...Array(3)].map((_, index) => ( + +
+
+ + +
+
+ + + ))} +
+ +
+ ); +} From ffd5e6f2ee690a345c269dbbfbf66f0c779724f7 Mon Sep 17 00:00:00 2001 From: Omar Khan Date: Tue, 18 Mar 2025 01:29:58 -0400 Subject: [PATCH 2/6] [fix] formating --- src/app/(pages)/events/loading.tsx | 59 +++++++++++++++--------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/app/(pages)/events/loading.tsx b/src/app/(pages)/events/loading.tsx index 41283dcd..b6cc74b7 100644 --- a/src/app/(pages)/events/loading.tsx +++ b/src/app/(pages)/events/loading.tsx @@ -1,30 +1,29 @@ -'use client'; -import React from 'react'; -import { Card, CardContent } from '@/components/ui/card'; -import BlockContainer from '@/components/BlockContainer'; -import Image from 'next/image'; - -export default function Loading() { - return ( -
- -
- {[...Array(3)].map((_, index) => ( - -
-
- - -
-
- - - ))} -
- -
- ); -} +'use client'; +import React from 'react'; +import { Card, CardContent } from '@/components/ui/card'; +import BlockContainer from '@/components/BlockContainer'; +// import Image from 'next/image'; + +export default function Loading() { + return ( +
+ +
+ {[...Array(3)].map((_, index) => ( + +
+
+ +
+
+ + + ))} +
+ +
+ ); +} From 7e19ae5909b1d22f88dbd504f6c1dc5aab952fa7 Mon Sep 17 00:00:00 2001 From: Omar Khan Date: Sun, 23 Mar 2025 14:03:46 -0400 Subject: [PATCH 3/6] [feat] implemented loading states for events and current projects --- .../(pages)/events/_components/loading.tsx | 23 +++++++++++ src/app/(pages)/events/loading.tsx | 29 -------------- src/app/(pages)/events/page.tsx | 35 ++++++++++------- .../projects/_components/CurrentProjects.tsx | 18 +++------ .../projects/_components/PastProjects.tsx | 18 +++------ .../_components/ProjectCardSkeletons.tsx | 39 +++++++++++++++++++ src/app/(pages)/projects/page.tsx | 26 +++++++++---- src/components/ui/skeleton.tsx | 15 +++++++ 8 files changed, 128 insertions(+), 75 deletions(-) create mode 100644 src/app/(pages)/events/_components/loading.tsx delete mode 100644 src/app/(pages)/events/loading.tsx create mode 100644 src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx create mode 100644 src/components/ui/skeleton.tsx diff --git a/src/app/(pages)/events/_components/loading.tsx b/src/app/(pages)/events/_components/loading.tsx new file mode 100644 index 00000000..5ef1218d --- /dev/null +++ b/src/app/(pages)/events/_components/loading.tsx @@ -0,0 +1,23 @@ +import { Skeleton } from '@/components/ui/skeleton'; + +export default function EventCardLoading() { + return [...Array(6)].map((_, i) => ( +
+
+
+ +
+
+
+ + + + + +
+
+ )); +} diff --git a/src/app/(pages)/events/loading.tsx b/src/app/(pages)/events/loading.tsx deleted file mode 100644 index b6cc74b7..00000000 --- a/src/app/(pages)/events/loading.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client'; -import React from 'react'; -import { Card, CardContent } from '@/components/ui/card'; -import BlockContainer from '@/components/BlockContainer'; -// import Image from 'next/image'; - -export default function Loading() { - return ( -
- -
- {[...Array(3)].map((_, index) => ( - -
-
- -
-
- - - ))} -
- -
- ); -} diff --git a/src/app/(pages)/events/page.tsx b/src/app/(pages)/events/page.tsx index 2ffc1e4b..19479ede 100644 --- a/src/app/(pages)/events/page.tsx +++ b/src/app/(pages)/events/page.tsx @@ -1,32 +1,39 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import EventCard from './_components/EventCard'; import { getEvents } from '@/lib/notion/events'; import BlockContainer from '@/components/BlockContainer'; +import EventCardLoading from './_components/loading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; const EventsPage: React.FC = async () => { - const res = await getEvents(); return (
- {res.map(event => ( - - ))} + }> + +
); }; +async function Events() { + const res = await getEvents(); + return res.map(event => ( + + )); +} + export default EventsPage; diff --git a/src/app/(pages)/projects/_components/CurrentProjects.tsx b/src/app/(pages)/projects/_components/CurrentProjects.tsx index 23f192d9..c2daa3e3 100644 --- a/src/app/(pages)/projects/_components/CurrentProjects.tsx +++ b/src/app/(pages)/projects/_components/CurrentProjects.tsx @@ -1,16 +1,10 @@ import { v4 as uuidv4 } from 'uuid'; import ProjectCard from './ProjectCard'; -import { ProjectDataType } from '@/lib/notion/projects'; -import BlockContainer from '@/components/BlockContainer'; +import { getProjects, isCurrentProject } from '@/lib/notion/projects'; +// import BlockContainer from '@/components/BlockContainer'; -export default async function CurrentProjects({ projects }: { projects: ProjectDataType[] }) { - return ( - -
- {projects.map(project => ( - - ))} -
- - ); +export default async function CurrentProjects() { + const res = await getProjects(); + const projects = res.filter(project => isCurrentProject(project)); + return projects.map(project => ); } diff --git a/src/app/(pages)/projects/_components/PastProjects.tsx b/src/app/(pages)/projects/_components/PastProjects.tsx index 81657c67..264eaedb 100644 --- a/src/app/(pages)/projects/_components/PastProjects.tsx +++ b/src/app/(pages)/projects/_components/PastProjects.tsx @@ -1,16 +1,10 @@ import { v4 as uuidv4 } from 'uuid'; import PastProjectCard from './PastProjectCard'; -import { ProjectDataType } from '@/lib/notion/projects'; -import BlockContainer from '@/components/BlockContainer'; +import { getProjects, isCurrentProject } from '@/lib/notion/projects'; +// import BlockContainer from '@/components/BlockContainer'; -export default async function PastProjects({ projects }: { projects: ProjectDataType[] }) { - return ( - -
- {projects.map(project => ( - - ))} -
- - ); +export default async function PastProjects() { + const res = await getProjects(); + const projects = res.filter(project => !isCurrentProject(project)); + return projects.map(project => ); } diff --git a/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx b/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx new file mode 100644 index 00000000..82cb6895 --- /dev/null +++ b/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx @@ -0,0 +1,39 @@ +import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'; +import { Skeleton } from '@/components/ui/skeleton'; + +export default function ProjectCardSkeleton() { + return [1, 2].map(() => ( + <> + +
+ +
+ +
+ + + + +
+ + + +
+ +
+
+ + + + + + + + +
+ + + )); +} + +export function PastProjectCardSkeleton() {} diff --git a/src/app/(pages)/projects/page.tsx b/src/app/(pages)/projects/page.tsx index 28c50163..c6d94864 100644 --- a/src/app/(pages)/projects/page.tsx +++ b/src/app/(pages)/projects/page.tsx @@ -1,19 +1,29 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import CurrentProjects from './_components/CurrentProjects'; import PastProjects from './_components/PastProjects'; -import { getProjects, isCurrentProject } from '@/lib/notion/projects'; +// import { getProjects, isCurrentProject } from '@/lib/notion/projects'; +import BlockContainer from '@/components/BlockContainer'; +import ProjectCardSkeleton from './_components/ProjectCardSkeletons'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; export default async function Projects() { - const res = await getProjects(); - const currentProjects = res.filter(project => isCurrentProject(project)); - const pastProjects = res.filter(project => !isCurrentProject(project)); - return (
- - + +
+ }> + + +
+ + +
+ Loading...
}> + + +
+ ); } diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx new file mode 100644 index 00000000..01b8b6d4 --- /dev/null +++ b/src/components/ui/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ) +} + +export { Skeleton } From 532c51119e1975dd1c72560b48d0d3c51c7aa680 Mon Sep 17 00:00:00 2001 From: Anniechika <79059777+Anniechika@users.noreply.github.com> Date: Sun, 30 Mar 2025 15:42:40 -0400 Subject: [PATCH 4/6] Updating the Student page with suspense --- .../(pages)/students/_components/loading.tsx | 37 +++++++++++++++++++ .../(pages)/students/_components/student.tsx | 21 +++++++++++ src/app/(pages)/students/page.tsx | 26 +++---------- 3 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 src/app/(pages)/students/_components/loading.tsx create mode 100644 src/app/(pages)/students/_components/student.tsx diff --git a/src/app/(pages)/students/_components/loading.tsx b/src/app/(pages)/students/_components/loading.tsx new file mode 100644 index 00000000..b4cdf3f8 --- /dev/null +++ b/src/app/(pages)/students/_components/loading.tsx @@ -0,0 +1,37 @@ +import BlockContainer from '@/components/BlockContainer'; +import { Skeleton } from '@/components/ui/skeleton'; + +export default function Loading() { + return ( + <> + + +
+ {new Array(12).fill('').map(index => ( + + ))} +
+ + + +
+ {new Array(12).fill('').map(index => ( + + ))} +
+ + + ); +} + +function TeamProfileLoading() { + return ( +
+
+ +
+ + +
+ ); +} diff --git a/src/app/(pages)/students/_components/student.tsx b/src/app/(pages)/students/_components/student.tsx new file mode 100644 index 00000000..c834f1d9 --- /dev/null +++ b/src/app/(pages)/students/_components/student.tsx @@ -0,0 +1,21 @@ +import { getStudents } from '@/lib/notion/students'; +import Section, { TeamDataType } from './Section'; +import { v4 as uuidv4 } from 'uuid'; + +export default async function Student() { + const students = await getStudents(); + + let teamNamesSet = new Set(); + for (const student of students) { + teamNamesSet.add(student.team); + } + + const teamNamesArray = Array.from(teamNamesSet); + const teams: TeamDataType[] = []; + for (const teamName of teamNamesArray) { + const teamMembers = students.filter(student => student.team == teamName); + teams.push({ teamName, teamMembers }); + } + + return teams.map(team =>
); +} diff --git a/src/app/(pages)/students/page.tsx b/src/app/(pages)/students/page.tsx index 77cea84c..b41b9b61 100644 --- a/src/app/(pages)/students/page.tsx +++ b/src/app/(pages)/students/page.tsx @@ -1,26 +1,12 @@ -import Section, { TeamDataType } from './_components/Section'; -import { getStudents } from '@/lib/notion/students'; -import { v4 as uuidv4 } from 'uuid'; import bluePeople from './_assets/blue_people.svg'; import Image from 'next/image'; +import Student from './_components/student'; +import { Suspense } from 'react'; +import Loading from './_components/loading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; export default async function Students() { - const students = await getStudents(); - - let teamNamesSet = new Set(); - for (const student of students) { - teamNamesSet.add(student.team); - } - - const teamNamesArray = Array.from(teamNamesSet); - const teams: TeamDataType[] = []; - for (const teamName of teamNamesArray) { - const teamMembers = students.filter(student => student.team == teamName); - teams.push({ teamName, teamMembers }); - } - return (
@@ -32,9 +18,9 @@ export default async function Students() { Image of blue figures
- {teams.map(team => ( -
- ))} + }> + +
From 5ff9363d0ccf830b9b2bc905c61b629b335a05e1 Mon Sep 17 00:00:00 2001 From: Anniechika <79059777+Anniechika@users.noreply.github.com> Date: Sat, 5 Apr 2025 14:49:51 -0400 Subject: [PATCH 5/6] Update student loading section --- src/app/(pages)/students/_components/Section.tsx | 4 ++-- src/app/(pages)/students/_components/TeamProfile.tsx | 2 +- src/app/(pages)/students/_components/loading.tsx | 8 ++++---- src/app/(pages)/students/_components/student.tsx | 2 +- src/app/(pages)/students/page.tsx | 2 -- 5 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/app/(pages)/students/_components/Section.tsx b/src/app/(pages)/students/_components/Section.tsx index 6ce995c2..f3b90774 100644 --- a/src/app/(pages)/students/_components/Section.tsx +++ b/src/app/(pages)/students/_components/Section.tsx @@ -19,8 +19,8 @@ export default function Section({ team }: { team: TeamDataType }) { titleSize="sm" >
- {team.teamMembers.map(person => ( - + {team.teamMembers.map(member => ( + ))}
diff --git a/src/app/(pages)/students/_components/TeamProfile.tsx b/src/app/(pages)/students/_components/TeamProfile.tsx index e9919969..b6131709 100644 --- a/src/app/(pages)/students/_components/TeamProfile.tsx +++ b/src/app/(pages)/students/_components/TeamProfile.tsx @@ -15,7 +15,7 @@ function TeamProfileBase({ student, hover = false }: { student: StudentDataType; src={student.imageUrl} width={128} height={128} - alt={'Picture of ' + (hover ? student.name : 'blueprint logo')} + alt={'picture of' + (hover ? student.name : 'blueprint logo')} />

{student.name}

diff --git a/src/app/(pages)/students/_components/loading.tsx b/src/app/(pages)/students/_components/loading.tsx index b4cdf3f8..4ebf8a4a 100644 --- a/src/app/(pages)/students/_components/loading.tsx +++ b/src/app/(pages)/students/_components/loading.tsx @@ -7,16 +7,16 @@ export default function Loading() {
- {new Array(12).fill('').map(index => ( - + {new Array(12).fill('').map(id => ( + ))}
- {new Array(12).fill('').map(index => ( - + {new Array(12).fill('').map(id => ( + ))}
diff --git a/src/app/(pages)/students/_components/student.tsx b/src/app/(pages)/students/_components/student.tsx index c834f1d9..6d6f7b81 100644 --- a/src/app/(pages)/students/_components/student.tsx +++ b/src/app/(pages)/students/_components/student.tsx @@ -13,7 +13,7 @@ export default async function Student() { const teamNamesArray = Array.from(teamNamesSet); const teams: TeamDataType[] = []; for (const teamName of teamNamesArray) { - const teamMembers = students.filter(student => student.team == teamName); + const teamMembers = students.filter(stu => stu.team == teamName); teams.push({ teamName, teamMembers }); } diff --git a/src/app/(pages)/students/page.tsx b/src/app/(pages)/students/page.tsx index b41b9b61..53d47dbc 100644 --- a/src/app/(pages)/students/page.tsx +++ b/src/app/(pages)/students/page.tsx @@ -4,8 +4,6 @@ import Student from './_components/student'; import { Suspense } from 'react'; import Loading from './_components/loading'; -export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; - export default async function Students() { return (
From c2b40a9de2525d18e241ac6ff54f1a7583e8e0c9 Mon Sep 17 00:00:00 2001 From: Omar Khan Date: Sat, 5 Apr 2025 20:17:31 -0400 Subject: [PATCH 6/6] [feat] home, projects, events, and students loading added/modified --- .../{loading.tsx => EventsLoading.tsx} | 6 +- src/app/(pages)/events/page.tsx | 2 +- .../(pages)/home/_components/EventsBlock.tsx | 42 ++++++++----- .../home/_components/HomePageLoading.tsx | 36 +++++++++++ .../home/_components/ProjectsBlock.tsx | 38 ++++++++---- .../projects/_components/PastProjectCard.tsx | 12 ++-- .../_components/ProjectCardSkeletons.tsx | 39 ------------ .../_components/ProjectCardsLoading.tsx | 59 +++++++++++++++++++ src/app/(pages)/projects/page.tsx | 4 +- .../_components/{student.tsx => Students.tsx} | 0 .../{loading.tsx => StudentsLoading.tsx} | 6 +- src/app/(pages)/students/page.tsx | 12 ++-- 12 files changed, 170 insertions(+), 86 deletions(-) rename src/app/(pages)/events/_components/{loading.tsx => EventsLoading.tsx} (85%) create mode 100644 src/app/(pages)/home/_components/HomePageLoading.tsx delete mode 100644 src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx create mode 100644 src/app/(pages)/projects/_components/ProjectCardsLoading.tsx rename src/app/(pages)/students/_components/{student.tsx => Students.tsx} (100%) rename src/app/(pages)/students/_components/{loading.tsx => StudentsLoading.tsx} (88%) diff --git a/src/app/(pages)/events/_components/loading.tsx b/src/app/(pages)/events/_components/EventsLoading.tsx similarity index 85% rename from src/app/(pages)/events/_components/loading.tsx rename to src/app/(pages)/events/_components/EventsLoading.tsx index 5ef1218d..ad437242 100644 --- a/src/app/(pages)/events/_components/loading.tsx +++ b/src/app/(pages)/events/_components/EventsLoading.tsx @@ -1,14 +1,14 @@ import { Skeleton } from '@/components/ui/skeleton'; export default function EventCardLoading() { - return [...Array(6)].map((_, i) => ( + return new Array(2).fill('').map(id => (
- +
diff --git a/src/app/(pages)/events/page.tsx b/src/app/(pages)/events/page.tsx index 19479ede..27aca9da 100644 --- a/src/app/(pages)/events/page.tsx +++ b/src/app/(pages)/events/page.tsx @@ -2,7 +2,7 @@ import React, { Suspense } from 'react'; import EventCard from './_components/EventCard'; import { getEvents } from '@/lib/notion/events'; import BlockContainer from '@/components/BlockContainer'; -import EventCardLoading from './_components/loading'; +import EventCardLoading from './_components/EventsLoading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; diff --git a/src/app/(pages)/home/_components/EventsBlock.tsx b/src/app/(pages)/home/_components/EventsBlock.tsx index 5a3c6ec8..81435ade 100644 --- a/src/app/(pages)/home/_components/EventsBlock.tsx +++ b/src/app/(pages)/home/_components/EventsBlock.tsx @@ -3,13 +3,12 @@ import EventCard from './EventCard'; import { getFeaturedEvents } from '@/lib/notion/events'; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel'; import { getFeaturedAnnouncements } from '@/lib/notion/announcements'; +import { Suspense } from 'react'; +import { HomeEventLoading } from './HomePageLoading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; -export default async function HomeEvents() { - const res = await getFeaturedEvents(); - const news = await getFeaturedAnnouncements(); - +export default function HomeEvents() { return (
@@ -20,18 +19,9 @@ export default async function HomeEvents() { }} className="w-full" > - - {news.map(announcement => ( - - - - ))} - {res.map(event => ( - - - - ))} - + }> + + @@ -40,3 +30,23 @@ export default async function HomeEvents() { ); } + +async function Events() { + const res = await getFeaturedEvents(); + const news = await getFeaturedAnnouncements(); + + return ( + + {news.map(announcement => ( + + + + ))} + {res.map(event => ( + + + + ))} + + ); +} diff --git a/src/app/(pages)/home/_components/HomePageLoading.tsx b/src/app/(pages)/home/_components/HomePageLoading.tsx new file mode 100644 index 00000000..841db2dc --- /dev/null +++ b/src/app/(pages)/home/_components/HomePageLoading.tsx @@ -0,0 +1,36 @@ +import { CarouselContent, CarouselItem } from '@/components/ui/carousel'; +import { Skeleton } from '@/components/ui/skeleton'; + +export function HomeProjectLoading() { + return ( + + {new Array(3).fill('').map(id => ( + +
+ +
+ + ))} + + ); +} + +export function HomeProjectLoadingMobile() { + return new Array(3).fill('').map(id => ( +
+ +
+ )); +} + +export function HomeEventLoading() { + return ( + + {new Array(3).fill('').map(id => ( + + + + ))} + + ); +} diff --git a/src/app/(pages)/home/_components/ProjectsBlock.tsx b/src/app/(pages)/home/_components/ProjectsBlock.tsx index 89e66275..9dcd57f4 100644 --- a/src/app/(pages)/home/_components/ProjectsBlock.tsx +++ b/src/app/(pages)/home/_components/ProjectsBlock.tsx @@ -4,11 +4,12 @@ import Link from 'next/link'; import { MdDoubleArrow } from 'react-icons/md'; import { getFeaturedProjects } from '@/lib/notion/projects'; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel'; +import { Suspense } from 'react'; +import { HomeProjectLoading, HomeProjectLoadingMobile } from './HomePageLoading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; export default async function ProjectsBlock() { - const featuredProjects = await getFeaturedProjects(); return (
@@ -19,20 +20,16 @@ export default async function ProjectsBlock() { }} className="hidden md:block" > - - {featuredProjects.map(project => ( - - - - ))} - + }> + +
- {featuredProjects.map(project => ( - - ))} + }> + +
@@ -49,3 +46,22 @@ export default async function ProjectsBlock() { ); } + +async function ProjectCards() { + const featuredProjects = await getFeaturedProjects(); + return ( + + {featuredProjects.map(project => ( + + + + ))} + + ); +} + +async function ProjectCardsMobile() { + const featuredProjects = await getFeaturedProjects(); + + return featuredProjects.map(project => ); +} diff --git a/src/app/(pages)/projects/_components/PastProjectCard.tsx b/src/app/(pages)/projects/_components/PastProjectCard.tsx index e68cbbae..9261b1dc 100644 --- a/src/app/(pages)/projects/_components/PastProjectCard.tsx +++ b/src/app/(pages)/projects/_components/PastProjectCard.tsx @@ -22,11 +22,13 @@ export default function PastProjectCard({ data }: { data: ProjectDataType }) { />
)} -
- {data.companyName} - -

{data.description}

-

{data.productName}

+
+
+ {data.companyName} +

{data.productName}

+
+ +

{data.description}
diff --git a/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx b/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx deleted file mode 100644 index 82cb6895..00000000 --- a/src/app/(pages)/projects/_components/ProjectCardSkeletons.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'; -import { Skeleton } from '@/components/ui/skeleton'; - -export default function ProjectCardSkeleton() { - return [1, 2].map(() => ( - <> - -
- -
- -
- - - - -
- - - -
- -
-
- - - - - - - - -
- - - )); -} - -export function PastProjectCardSkeleton() {} diff --git a/src/app/(pages)/projects/_components/ProjectCardsLoading.tsx b/src/app/(pages)/projects/_components/ProjectCardsLoading.tsx new file mode 100644 index 00000000..2bde7692 --- /dev/null +++ b/src/app/(pages)/projects/_components/ProjectCardsLoading.tsx @@ -0,0 +1,59 @@ +import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'; +import { Skeleton } from '@/components/ui/skeleton'; + +export default function ProjectCardSkeleton() { + return new Array(2).fill('').map(id => ( + <> + +
+ +
+ +
+ + + + +
+ +
+ +
+
+ + + + + + + + +
+ + + )); +} + +export function PastProjectCardSkeleton() { + return new Array(3).fill('').map(id => ( +
+
+
+ +
+
+
+ + +
+ + + +
+
+
+ )); +} diff --git a/src/app/(pages)/projects/page.tsx b/src/app/(pages)/projects/page.tsx index c6d94864..64fdd118 100644 --- a/src/app/(pages)/projects/page.tsx +++ b/src/app/(pages)/projects/page.tsx @@ -3,7 +3,7 @@ import CurrentProjects from './_components/CurrentProjects'; import PastProjects from './_components/PastProjects'; // import { getProjects, isCurrentProject } from '@/lib/notion/projects'; import BlockContainer from '@/components/BlockContainer'; -import ProjectCardSkeleton from './_components/ProjectCardSkeletons'; +import ProjectCardSkeleton, { PastProjectCardSkeleton } from './_components/ProjectCardsLoading'; export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600; @@ -19,7 +19,7 @@ export default async function Projects() {
- Loading...
}> + }>
diff --git a/src/app/(pages)/students/_components/student.tsx b/src/app/(pages)/students/_components/Students.tsx similarity index 100% rename from src/app/(pages)/students/_components/student.tsx rename to src/app/(pages)/students/_components/Students.tsx diff --git a/src/app/(pages)/students/_components/loading.tsx b/src/app/(pages)/students/_components/StudentsLoading.tsx similarity index 88% rename from src/app/(pages)/students/_components/loading.tsx rename to src/app/(pages)/students/_components/StudentsLoading.tsx index 4ebf8a4a..f1af3e3c 100644 --- a/src/app/(pages)/students/_components/loading.tsx +++ b/src/app/(pages)/students/_components/StudentsLoading.tsx @@ -3,9 +3,9 @@ import { Skeleton } from '@/components/ui/skeleton'; export default function Loading() { return ( - <> +
- +
{new Array(12).fill('').map(id => ( @@ -20,7 +20,7 @@ export default function Loading() { ))}
- +
); } diff --git a/src/app/(pages)/students/page.tsx b/src/app/(pages)/students/page.tsx index 53d47dbc..b6c41896 100644 --- a/src/app/(pages)/students/page.tsx +++ b/src/app/(pages)/students/page.tsx @@ -1,8 +1,8 @@ import bluePeople from './_assets/blue_people.svg'; import Image from 'next/image'; -import Student from './_components/student'; +import Student from './_components/Students'; import { Suspense } from 'react'; -import Loading from './_components/loading'; +import Loading from './_components/StudentsLoading'; export default async function Students() { return ( @@ -15,11 +15,11 @@ export default async function Students() { Image of blue figures
-
- }> + }> +
- -
+
+