add loading all page & change bugs

2024-09-05 22:20:18 +03:30
parent 087ed4a818
commit c45a161fcb
72 changed files with 1208 additions and 661 deletions
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Button } from "@mui/material";
+import { Button, Skeleton } from "@mui/material";

 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -7,60 +7,74 @@ import ClockD from "@/components/icons/ClockD";
 import LikeD from "@/components/icons/LikeD";
 import PointD from "@/components/icons/PointD";
 import Link from "next/link";
+import CustomLoading from "./loading/Custom";
+import TextLoading from "./loading/Text";
+import CircularLoading from "./loading/Circular";

-function ItemDoctor({ doctor }) {
+function ItemDoctor({ doctor, loading }) {
    return (
        <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
            {/* Detail Doctor */}
            <div className="flex items-center justify-start gap-2.5">
-                <Image
-                    width={72}
-                    height={72}
-                    src={doctor.img}
-                    alt="image-doctor"
-                    className="py-1.5"
-                />
+                <CircularLoading loading={loading} width={66} height={66}>
+                    <Image
+                        width={72}
+                        height={72}
+                        src={doctor.img}
+                        alt="image-doctor"
+                        className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
+                    />
+                </CircularLoading>
                <div className="flex flex-col items-start justify-center gap-2">
-                    <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
-                    <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
-                    <div className="flex rounded items-center justify-start gap-2">
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
-                            <LikeD />
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                    <TextLoading width={90} height={15} loading={loading}>
+                        <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+                    </TextLoading>
+                    <TextLoading width={120} height={15} loading={loading}>
+                        <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
+                    </TextLoading>
+                    <CustomLoading width={100} height={25} loading={loading}>
+                        <div className="flex rounded items-center justify-start gap-2">
+                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                                <LikeD />
+                                <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                            </div>
+                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                                <PointD />
+                                <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
+                            </div>
                        </div>
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
-                            <PointD />
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
-                        </div>
-                    </div>
+                    </CustomLoading>
                </div>
            </div>

            {/* Hours of work */}
-            <div className="flex my-4 items-start justify-start gap-0.5">
+            <div className="flex my-4 items-center justify-start gap-0.5">
                <ClockD />
-                <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+                <TextLoading width={150} height={15} loading={loading}>
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+                </TextLoading>
            </div>
-            <p
-                className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
+            <CustomLoading loading={loading} width={150} height={20}>
+                <p
+                    className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                    ${doctor.free_turn ?
-                        'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
-                        'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
-                    }`}
-            >{doctor.free_turn ?
-                `اولین نوبت آزاد: ${doctor.free_turn}` :
-                'نوبت ندارد'
-                }</p>
-
+                            'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
+                            'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
+                        }`}
+                >{doctor.free_turn ?
+                    `اولین نوبت آزاد: ${doctor.free_turn}` :
+                    'نوبت ندارد'
+                    }</p>
+            </CustomLoading>
            {/* Arrow */}
            <Link href={`/doctor/${doctor.id}`}>
                <Button
                    className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                    ${doctor.free_turn ?
-                            '!bg-[#5559CE]' :
-                            '!bg-[#D7D7D7]'
+                    ${!doctor.free_turn || loading ?
+                            '!bg-[#D7D7D7]' :
+                            '!bg-[#5559CE]'
                        }`}
-                    disabled={!doctor.free_turn}
+                    disabled={!doctor.free_turn || loading}
                >
                    <ArrowLeftD />
                </Button>
@@ -2,21 +2,21 @@
 import { useState } from 'react';
 import ItemUser from './ItemUser'

-function Comment({ data }) {
+function Comment({ data, loading }) {

    const [list, setList] = useState(data.comments);
    const [update, setUpdate] = useState(false);

    return (
-        <ul className={`flex flex-col !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
+        <ul className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
            {data && !!data.comments.length && data.comments.map((item, idx) => (
                <ItemUser
                    key={idx}
                    list={list}
                    data={item}
                    update={update}
-                    loading={false}
                    setList={setList}
+                    loading={loading}
                    setUpdate={setUpdate}
                />
            ))}
@@ -0,0 +1,13 @@
+import { Skeleton } from '@mui/material'
+
+function CircularLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            variant="circular"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default CircularLoading
@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function CustomLoading({ width, height, children, loading }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            height={height}
+            variant="rounded"
+            width={width}
+        />
+    ) : children
+}
+
+export default CustomLoading
@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function MultilineLoading({ loading, width, height, children, line }) {
+    return loading ? Array(line).fill({}).map(_ => (
+        <Skeleton
+            className={`${width === 'full' ? '!w-full' : ''} !my-2`}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    )) : children
+}
+
+export default MultilineLoading
@@ -0,0 +1,14 @@
+import { Skeleton } from '@mui/material'
+
+function TextLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default TextLoading