From e52ff60d18ef202714b6774e55e61a1e61fc8c3e Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 16 May 2023 23:07:08 +0000 Subject: [PATCH] feat: add loader to pages --- .../[orgslug]/(withmenu)/collections/loading.tsx | 9 +++++++++ .../(withmenu)/course/[courseid]/page.tsx | 3 ++- .../[orgslug]/(withmenu)/courses/loading.tsx | 9 +++++++++ front/app/_orgs/[orgslug]/(withmenu)/loading.tsx | 8 ++++++++ front/app/_orgs/[orgslug]/(withmenu)/page.tsx | 11 ++++++++--- .../_orgs/[orgslug]/(withmenu)/trail/page.tsx | 3 ++- front/components/Pages/PageLoading.tsx | 16 ++++++++++++++++ 7 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 front/app/_orgs/[orgslug]/(withmenu)/collections/loading.tsx create mode 100644 front/app/_orgs/[orgslug]/(withmenu)/courses/loading.tsx create mode 100644 front/app/_orgs/[orgslug]/(withmenu)/loading.tsx create mode 100644 front/components/Pages/PageLoading.tsx diff --git a/front/app/_orgs/[orgslug]/(withmenu)/collections/loading.tsx b/front/app/_orgs/[orgslug]/(withmenu)/collections/loading.tsx new file mode 100644 index 00000000..b3fd3bc3 --- /dev/null +++ b/front/app/_orgs/[orgslug]/(withmenu)/collections/loading.tsx @@ -0,0 +1,9 @@ +import PageLoading from "@components/Pages/PageLoading"; + +export default function Loading() { + // Or a custom loading skeleton component + return ( + + ) + +} \ No newline at end of file diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx index a533d424..8a6214c4 100644 --- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx @@ -9,6 +9,7 @@ import useSWR, { mutate } from "swr"; import { swrFetcher } from "@services/utils/ts/requests"; import { useRouter } from "next/navigation"; import ToolTip from "@components/UI/Tooltip/Tooltip"; +import PageLoading from "@components/Pages/PageLoading"; const CourseIdPage = (params: any) => { const courseid = params.params.courseid; @@ -41,7 +42,7 @@ const CourseIdPage = (params: any) => { <> {error &&

Failed to load

} {!course ? ( -
Loading...
+ ) : (

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/loading.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/loading.tsx new file mode 100644 index 00000000..b3fd3bc3 --- /dev/null +++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/loading.tsx @@ -0,0 +1,9 @@ +import PageLoading from "@components/Pages/PageLoading"; + +export default function Loading() { + // Or a custom loading skeleton component + return ( + + ) + +} \ No newline at end of file diff --git a/front/app/_orgs/[orgslug]/(withmenu)/loading.tsx b/front/app/_orgs/[orgslug]/(withmenu)/loading.tsx new file mode 100644 index 00000000..9a7cafe9 --- /dev/null +++ b/front/app/_orgs/[orgslug]/(withmenu)/loading.tsx @@ -0,0 +1,8 @@ +import PageLoading from "@components/Pages/PageLoading"; + +export default function Loading() { + return ( + + ) + +} \ No newline at end of file diff --git a/front/app/_orgs/[orgslug]/(withmenu)/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/page.tsx index b6cd63e6..94b1c30d 100644 --- a/front/app/_orgs/[orgslug]/(withmenu)/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/page.tsx @@ -1,4 +1,5 @@ -// export const runtime = 'edge'; +export const dynamic = 'force-dynamic'; + import { Menu } from "@components/UI/Elements/Menu"; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; import { getOrgCourses } from "@services/courses/courses"; @@ -12,6 +13,9 @@ import { getOrgCollections } from "@services/courses/collections"; const OrgHomePage = async (params: any) => { const orgslug = params.params.orgslug; + // timeout to simulate a slow connection + // await new Promise((resolve) => setTimeout(resolve, 12000)); + const courses = await getOrgCourses(orgslug); const collections = await getOrgCollections(); @@ -23,7 +27,8 @@ const OrgHomePage = async (params: any) => { return (
- + +
{/* Collections */} @@ -34,7 +39,7 @@ const OrgHomePage = async (params: any) => { <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" > <h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1> <div className="flex -space-x-4"> - {collection.courses.slice(0,3).map((course: any) => ( + {collection.courses.slice(0, 3).map((course: any) => ( <Link key={course.course_id} href={getUriWithOrg(orgslug, "/course/" + course.course_id.substring(7))}> <img className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white z-50" key={course.course_id} src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt={course.name} /> </Link> diff --git a/front/app/_orgs/[orgslug]/(withmenu)/trail/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/trail/page.tsx index f965dce1..b44645af 100644 --- a/front/app/_orgs/[orgslug]/(withmenu)/trail/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/trail/page.tsx @@ -1,4 +1,5 @@ "use client"; +import PageLoading from "@components/Pages/PageLoading"; import { getAPIUrl, getBackendUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; import React from "react"; @@ -16,7 +17,7 @@ function Trail(params: any) { <br /> {error && <p>Failed to load</p>} {!trail ? ( - <div>Loading...</div> + <PageLoading></PageLoading> ) : ( <div> {trail.courses.map((course: any) => ( diff --git a/front/components/Pages/PageLoading.tsx b/front/components/Pages/PageLoading.tsx new file mode 100644 index 00000000..52fa3a61 --- /dev/null +++ b/front/components/Pages/PageLoading.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +function PageLoading() { + return ( + <div className="max-w-7xl mx-auto px-4 py-20"> + <div className="animate-pulse mx-auto flex space-x-4"> + <svg className="mx-auto" width="295" height="295" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg"> + <rect opacity="0.51" x="6.5" y="6.5" width="282" height="282" rx="78.5" stroke="#454545" stroke-opacity="0.46" stroke-width="13" stroke-dasharray="11 11" /> + <path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#454545" fill-opacity="0.13" /> + </svg> + </div> + </div> + ) +} + +export default PageLoading \ No newline at end of file