skelton changed

client/app/(patient)/profile/layout.tsx

@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getPatientProfile } from "@/services/api/patientProtectedApis";
 import { ErrorResponse, IPatient } from "@/types";
 import { AxiosError } from "axios";
-import ProfileSkeleton from "@/components/skeletons/profile";
+import ProfileSkeleton from "@/components/skeletons/Profile";
 import { notFound } from "next/navigation";
 
 interface Props {

client/app/(patient)/signin/otp-verification/page.tsx

@@ -8,7 +8,7 @@ import { Banners } from "@/constants";
 import Link from "next/link";
 import Image from "next/image";
 import OtpVerificationSection from "@/components/forms/patient/OtpForms";
-import UniversalSkelton from "@/components/skeletons/Universal";
+import AuthSkelton from "@/components/skeletons/AuthPage";
 import { useAuth } from "@/lib/hooks/useAuth";
 
 const OtpVerificationPage = () => {
@@ -30,7 +30,7 @@ const OtpVerificationPage = () => {
       return () => clearTimeout(timer);
    }, []);
    if (isLoading) {
-      return  <UniversalSkelton />;
+      return  <AuthSkelton />;
    }
    if (otpMail && !patientToken) {
       const handleResend = async () => {

client/components/patient/auth/SignInPageSection.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Banners } from "@/constants";
 import { notFound } from "next/navigation";
-import UniversalSkeleton from "@/components/skeletons/Universal";
+import AuthSkelton from "@/components/skeletons/AuthPage";
 import { useAuth } from "@/lib/hooks/useAuth";
 import { useState, useEffect } from "react";
 
@@ -21,7 +21,7 @@ const SignFromSection = () => {
    }, []);
 
    if (isLoading) {
-      return <UniversalSkeleton />;
+      return <AuthSkelton />;
    }
 
    if (!patientToken) {

client/components/patient/auth/SignUnPageSection.tsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 import SignupForm from "@/components/forms/patient/SignupForm";
 import { Banners } from "@/constants";
-import UniversalSkeleton from "@/components/skeletons/Universal";
+import AuthSkelton from "@/components/skeletons/AuthPage";
 import { notFound } from "next/navigation";
 import { useState, useEffect } from "react";
 import { useAuth } from "@/lib/hooks/useAuth";
@@ -20,7 +20,7 @@ const SignUnFormSection = () => {
    }, []);
 
    if (isLoading) {
-      return <UniversalSkeleton />;
+      return <AuthSkelton />;
    }
 
    if (!patientToken) {

client/components/skeletons/AuthPage.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function AuthSkelton() {
+  return (
+    <div className="flex min-h-screen bg-gray-900 bg-opacity-25 text-white">
+      <div className="flex-1 p-8 sm:p-12 md:p-16 lg:p-24 mt-10">
+        <div className="mb-8">
+          <Skeleton className="h-10 w-32 bg-gray-700" />
+        </div>
+        <div className="mb-12">
+          <Skeleton className="h-12 w-3/4 bg-gray-700" />
+        </div>
+        <div className="space-y-6">
+          <Skeleton className="h-6 w-1/4 bg-gray-700" />
+          <Skeleton className="h-12 w-full bg-gray-700" />
+          <Skeleton className="h-6 w-1/4 bg-gray-700" />
+          <Skeleton className="h-12 w-full bg-gray-700" />
+          <Skeleton className="h-12 w-full bg-gray-700" />
+        </div>
+        <div className="mt-8">
+          <Skeleton className="h-6 w-1/3 bg-gray-700" />
+        </div>
+      </div>
+
+      <div className="hidden md:block md:flex-1">
+        <Skeleton className="h-full w-full bg-gray-700" />
+      </div>
+    </div>
+  )
+}

client/components/skeletons/Universal.tsx

@@ -3,15 +3,12 @@ import { Skeleton } from "@/components/ui/skeleton"
 export default function UniversalSkelton() {
   return (
     <div className="w-full min-h-screen p-6 space-y-8">
-      {/* Header */}
       <div className="space-y-4">
         <Skeleton className="h-8 w-[200px] bg-gray-800 bg-opacity-20" />
         <Skeleton className="h-4 w-[300px] bg-gray-800 bg-opacity-20" />
       </div>
 
-      {/* Main content */}
       <div className="space-y-6">
-        {/* Section 1 */}
         <div className="space-y-4">
           <Skeleton className="h-6 w-[150px] bg-gray-800 bg-opacity-20" />
           <Skeleton className="h-4 w-full bg-gray-800 bg-opacity-20" />
@@ -32,7 +29,6 @@ export default function UniversalSkelton() {
           </div>
         </div>
 
-        {/* Section 3 */}
         <div className="space-y-4">
           <Skeleton className="h-6 w-[150px] bg-gray-800 bg-opacity-20" />
           <div className="space-y-2">