feat(doctors): add loading state management and pass filter to sendReq

app/component/modalSearchCity/Content.js

@@ -18,7 +18,7 @@ function Content({
   const { matchedState } = getStateInfoClient();
   const handleClick = () => {
     handleClose();
-    sendReq();
+    sendReq(filter);
   };
 
   const updateData = (name, value) => {

components/doctors/head/index.js

@@ -7,7 +7,7 @@ import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
 import { request } from "@/services/response";
 import FilterLocate from "./FilterLocate";
 
-function Head({ filter, setFilter, setPage, setDoctors }) {
+function Head({ filter, setFilter, setPage, setDoctors, setLoading }) {
   const router = useRouter();
 
   const setDataInURL = (newFilter) => {
@@ -38,6 +38,7 @@ function Head({ filter, setFilter, setPage, setDoctors }) {
     filteredName.page = 1;
     filteredName.limit = 12;
     setPage(1);
+    setLoading(true);
 
     return request
       .getDoctors(filteredName)
@@ -47,6 +48,9 @@ function Head({ filter, setFilter, setPage, setDoctors }) {
       })
       .catch((err) => {
         throw err;
+      })
+      .finally(() => {
+        setLoading(false);
       });
   };
 

components/doctors/index.js

@@ -45,6 +45,7 @@ function DoctorsPage({ matchedCity, matchedState, list }) {
   };
 
   const [filter, setFilter] = useState(defaultFilter);
+  const [loading, setLoading] = useState(false);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
@@ -54,6 +55,7 @@ function DoctorsPage({ matchedCity, matchedState, list }) {
         setPage={setPage}
         setFilter={setFilter}
         setDoctors={setDoctors}
+        setLoading={setLoading}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />
@@ -64,6 +66,8 @@ function DoctorsPage({ matchedCity, matchedState, list }) {
         filter={filter}
         setPage={setPage}
         doctors={doctors}
+        loading={loading}
+        setLoading={setLoading}
         setDoctors={setDoctors}
       />
     </div>

components/doctors/listDoctors/index.js

@@ -13,8 +13,10 @@ function ListDoctors({
   doctors,
   setPage,
   setDoctors,
+  loading: filterLoading,
 }) {
   const [loading, setLoading] = useState(false);
+  const isLoading = loading || filterLoading;
   const router = useRouter();
 
   const changePage =async (_, num) => {
@@ -54,14 +56,14 @@ function ListDoctors({
 
   return (
     <>
-      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
+      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] relative">
         {doctors && doctors.length ? (
           <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
             {doctors?.map((doctor, idx) => (
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
-                loading={loading}
+                loading={isLoading}
                 priority={idx < 3}
                 setDoctors={setDoctors}
               />