Added Necessary skeleton forms.

kihan2518B · Jan 11, 2025 · f1f13c3 · f1f13c3
1 parent 1675f91
commit f1f13c3
Show file tree

Hide file tree

Showing 12 changed files with 396 additions and 271 deletions.
diff --git a/src/app/(module)/(LMS)/_components/ClassEditForm.tsx b/src/app/(module)/(LMS)/_components/ClassEditForm.tsx
@@ -6,6 +6,7 @@ import * as z from "zod"
 import axios from "axios"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
+import { CourseFormSkeleton } from "@/components/(commnon)/Skeleton"
 
 import {
   Form,
@@ -27,6 +28,7 @@ interface ClassDetailsProps {
   user: any
   defaults: any
   classId: any
+  isLoading?: boolean
 }
 //Schema
 const initForm = {
@@ -38,13 +40,15 @@ const initForm = {
 export const ClassEditForm: React.FC<ClassDetailsProps> = ({
   defaults,
   user,
-  classId
+  classId,
+  isLoading
 }) => {
   const [formData, setFormData] =
     useState<Record<"name" | "code" | "semister", string | number>>(initForm)
   const [editingField, setEditingField] = useState<string | null>(null)
   const [isDirty, setIsDirty] = useState(false)
   const fields = ["name", "code", "semister"]
+  const [isDeleting, setIsDeleting] = useState(false)
 
   useEffect(() => {
     if (defaults) {
@@ -89,13 +93,16 @@ export const ClassEditForm: React.FC<ClassDetailsProps> = ({
   }
   async function handleDeleteClick() {
     try {
+      setIsDeleting(true)
       const res = await axios.delete(`/api/classes/${classId}`)
       if (res.status === 200) {
         toast.success(res.data.message)
         router.push(`/classes`)
       }
     } catch (error) {
       toast.error("Internal server error")
+    } finally {
+      setIsDeleting(false)
     }
   }
   const router = useRouter()
@@ -136,106 +143,116 @@ export const ClassEditForm: React.FC<ClassDetailsProps> = ({
   return (
     <div className=" mx-auto flex md:items-center md:justify-center h-full p-6">
       <h1 className="text-2xl"></h1>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 mt-8">
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Edit Class Details</FormLabel>
-                <FormControl>
-                  <EditableInputField
-                    key={"name"}
-                    label={"Class Name"}
-                    placeholder={"Enter your Class Name"}
-                    name={"name"}
-                    value={formData["name"] as string}
-                    onChange={(e) => {
-                      handleChange(e)
-                      field.onChange(e)
-                    }}
-                    isEditing={editingField === "name"}
-                    setEditingField={setEditingField}
-                    isDirty={isDirty}
-                    className=""
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="code"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Class Code</FormLabel>
-                <FormControl>
-                  <EditableInputField
-                    key={"code"}
-                    label={"Class Code"}
-                    placeholder={"Enter your Class Code"}
-                    name={"code"}
-                    value={formData["code"] as string}
-                    onChange={(e) => {
-                      handleChange(e)
-                      field.onChange(e)
-                    }}
-                    isEditing={editingField === "code"}
-                    setEditingField={setEditingField}
-                    isDirty={isDirty}
-                    className=""
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="semister"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Semister</FormLabel>
-                <FormControl>
-                  <EditableInputField
-                    key={"semister"}
-                    label={"Total Semister"}
-                    placeholder={"Enter total sem of the Class"}
-                    name={"semister"}
-                    value={formData["semister"]}
-                    onChange={(e) => {
-                      handleChange(e)
-                      field.onChange(
-                        e.target.value ? parseInt(e.target.value, 10) : ""
-                      )
-                    }}
-                    isEditing={editingField === "semister"}
-                    setEditingField={setEditingField}
-                    isDirty={isDirty}
-                    className=""
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className="flex items-center gap-x-2">
-            <Link href="/classes">
-              <Button type="button" variant="ghost">
-                Cancel
+      {isLoading ? (
+        <CourseFormSkeleton />
+      ) : (
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-8 mt-8"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Edit Class Details</FormLabel>
+                  <FormControl>
+                    <EditableInputField
+                      key={"name"}
+                      label={"Class Name"}
+                      placeholder={"Enter your Class Name"}
+                      name={"name"}
+                      value={formData["name"] as string}
+                      onChange={(e) => {
+                        handleChange(e)
+                        field.onChange(e)
+                      }}
+                      isEditing={editingField === "name"}
+                      setEditingField={setEditingField}
+                      isDirty={isDirty}
+                      className=""
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Class Code</FormLabel>
+                  <FormControl>
+                    <EditableInputField
+                      key={"code"}
+                      label={"Class Code"}
+                      placeholder={"Enter your Class Code"}
+                      name={"code"}
+                      value={formData["code"] as string}
+                      onChange={(e) => {
+                        handleChange(e)
+                        field.onChange(e)
+                      }}
+                      isEditing={editingField === "code"}
+                      setEditingField={setEditingField}
+                      isDirty={isDirty}
+                      className=""
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="semister"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Semister</FormLabel>
+                  <FormControl>
+                    <EditableInputField
+                      key={"semister"}
+                      label={"Total Semister"}
+                      placeholder={"Enter total sem of the Class"}
+                      name={"semister"}
+                      value={formData["semister"]}
+                      onChange={(e) => {
+                        handleChange(e)
+                        field.onChange(
+                          e.target.value ? parseInt(e.target.value, 10) : ""
+                        )
+                      }}
+                      isEditing={editingField === "semister"}
+                      setEditingField={setEditingField}
+                      isDirty={isDirty}
+                      className=""
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex items-center gap-x-2">
+              <Link href="/classes">
+                <Button type="button" variant="ghost">
+                  Cancel
+                </Button>
+              </Link>
+              {/* <Link href='/'> */}
+              <Button type="submit" disabled={!isValid || isSubmitting}>
+                {isSubmitting ? "Updating..." : "Update"}
               </Button>
-            </Link>
-            {/* <Link href='/'> */}
-            <Button type="submit" disabled={!isValid || isSubmitting}>
-              Update
-            </Button>
-            <DeleteButton label="Delete" onDelete={handleDeleteClick} />
-            {/* </Link> */}
-          </div>
-        </form>
-      </Form>
+              <DeleteButton
+                label={isDeleting ? "Deleting..." : "Delete"}
+                onDelete={handleDeleteClick}
+              />
+              {/* </Link> */}
+            </div>
+          </form>
+        </Form>
+      )}
     </div>
   )
 }
diff --git a/src/app/(module)/(LMS)/classes/[classId]/edit/page.tsx b/src/app/(module)/(LMS)/classes/[classId]/edit/page.tsx
@@ -6,7 +6,6 @@ import React, { useContext } from "react"
 import axios from "axios"
 import { RotateCcw } from "lucide-react"
 import { ButtonV1 } from "@/components/(commnon)/ButtonV1"
-import { CourseFormSkeleton } from "@/components/(commnon)/Skeleton"
 import { ClassEditForm } from "../../../_components/ClassEditForm"
 
 async function fetchClassById(classId: number) {
@@ -40,17 +39,14 @@ export default function ClassEditPage() {
       </div>
     )
   }
-  if (isLoading)
-    return (
-      <div className="h-full w-full">
-        <CourseFormSkeleton />
-      </div>
-    )
   return (
     <div>
-      {Class && (
-        <ClassEditForm defaults={Class} user={user} classId={classId} />
-      )}
+      <ClassEditForm
+        defaults={Class}
+        isLoading={isLoading}
+        user={user}
+        classId={classId}
+      />
     </div>
   )
 }
diff --git a/src/app/(module)/(LMS)/classes/create/page.tsx b/src/app/(module)/(LMS)/classes/create/page.tsx
@@ -6,6 +6,7 @@ import ClassForm from "../../_components/ClassForm"
 import { UserContext } from "@/context/user"
 import { useQuery } from "@tanstack/react-query"
 import { fetchCourses } from "../../_helper"
+import { CourseFormSkeleton } from "@/components/(commnon)/Skeleton"
 
 export default function CreateClassPage() {
   const { user } = useContext(UserContext)
@@ -28,7 +29,7 @@ export default function CreateClassPage() {
           Back
         </Link>
       </div>
-      {isLoading && <p>Loading...</p>}
+      {isLoading && <CourseFormSkeleton />}
       {courses && (
         <ClassForm
           courseId={courseId}

diff --git a/src/app/(module)/(LMS)/classes/my-class/[classId]/students/page.tsx b/src/app/(module)/(LMS)/classes/my-class/[classId]/students/page.tsx
@@ -8,10 +8,10 @@ import { Prisma } from "@prisma/client"
 import { useParams } from "next/navigation"
 import { ClassStudentTable } from "../_components/ClassStudentTable"
 import { AddStudentsDialog } from "../_components/AddStudent"
-import { Loader2 } from "lucide-react"
 import { ButtonV1 } from "@/components/(commnon)/ButtonV1"
 import Left from "@/components/Icons/Left"
 import Link from "next/link"
+import { CoursesSkeleton } from "@/components/(commnon)/Skeleton"
 
 export type StudentsWithRelation = Prisma.StudentGetPayload<{
   include: {
@@ -65,12 +65,7 @@ export default function ClassStudentsPage() {
           </div>
         </div>
 
-        {isLoading && (
-          <div className="flex items-center justify-center p-12 bg-white rounded-lg shadow-sm">
-            <Loader2 className="w-8 h-8 animate-spin text-ColorThree" />
-            <span className="ml-3 text-TextTwo">Loading students...</span>
-          </div>
-        )}
+        {isLoading && <CoursesSkeleton />}
 
         {isError && (
           <div className="p-4 bg-red-50 border border-red-200 rounded-lg">

diff --git a/src/app/(module)/(LMS)/courses/page.tsx b/src/app/(module)/(LMS)/courses/page.tsx
@@ -4,7 +4,7 @@ import React, { useContext, Suspense, useEffect, useState } from "react"
 import { UserContext } from "@/context/user"
 import { useQuery } from "@tanstack/react-query"
 import { fetchCourses } from "../_helper"
-import { CoursesSkeleton } from "@/components/(commnon)/Skeleton"
+import { ClassesCardSkeleton } from "@/components/(commnon)/Skeleton"
 import { ButtonV1 } from "@/components/(commnon)/ButtonV1"
 import { RotateCcw, PlusCircle } from "lucide-react"
 import { Courcecard_c } from "../_components/Courcecard_c"
@@ -31,7 +31,13 @@ const CoursesGrid = () => {
   }, [user?.roles])
 
   if (isLoading) {
-    return <CoursesSkeleton />
+    return (
+      <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-4 ml-2">
+        {[...Array(5)].map((_, i) => (
+          <ClassesCardSkeleton key={i} />
+        ))}
+      </div>
+    )
   }
 
   if (error) {
@@ -87,7 +93,15 @@ const CoursesPage = () => {
   return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">Courses</h1>
-      <Suspense fallback={<CoursesSkeleton />}>
+      <Suspense
+        fallback={
+          <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-4 ml-2">
+            {[...Array(5)].map((_, i) => (
+              <ClassesCardSkeleton key={i} />
+            ))}
+          </div>
+        }
+      >
         <CoursesGrid />
       </Suspense>
     </div>