feat: add loader to pages

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 (
+        <PageLoading></PageLoading>
+    )
+
+}

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 && <p>Failed to load</p>}
       {!course ? (
-        <div>Loading...</div>
+        <PageLoading></PageLoading>
       ) : (
         <CoursePageLayout>
           <br></br>

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 (
+        <PageLoading></PageLoading>
+    )
+
+}

front/app/_orgs/[orgslug]/(withmenu)/loading.tsx

@@ -0,0 +1,8 @@
+import PageLoading from "@components/Pages/PageLoading";
+
+export default function Loading() {
+    return (
+        <PageLoading></PageLoading>
+    )
+
+}

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();
 
@@ -24,6 +28,7 @@ const OrgHomePage = async (params: any) => {
     <div>
 
 
+
       <div className="max-w-7xl mx-auto px-4 py-10">
         {/* Collections */}
         <Title title="Collections" type="col" />
@@ -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>

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) => (

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