search page completed, unit cards skeletons

src/pages/SearchPage.tsx

@@ -12,6 +12,7 @@ import clsx from "clsx";
 import { AnimatePresence, motion } from "motion/react";
 import { useDebounce } from "../hooks/useDebounce";
 import Select from "../components/ui/Select";
+import Skeleton from "react-loading-skeleton";
 
 const SORT_OPTIONS = {
   "Sort by ascending price": "cost asc",
@@ -43,7 +44,7 @@ function SearchPage() {
     "Sort by ascending price"
   );
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       initialPageParam: 0,
       queryKey: [
@@ -139,36 +140,19 @@ function SearchPage() {
     };
   }, []);
 
-  // const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
 
-  // const queryClient = useQueryClient();
-
-  // useEffect(() => {
-  //   const filters = queryClient.getQueryData<Filters>(["filters", project]);
-  //   if (filters) {
-  //     setActiveFiltersCount(
-  //       +!!view +
-  //         +!!unitTypes.length +
-  //         +(debouncedCost[0] !== filters.minCost) +
-  //         +(debouncedCost[1] !== filters.maxCost) +
-  //         +(debouncedArea[0] !== filters.minArea) +
-  //         +(debouncedArea[1] !== filters.maxArea) +
-  //         +(debouncedFloor[0] !== filters.minFloor) +
-  //         +(debouncedFloor[1] !== filters.maxFloor)
-  //     );
-  //   }
-  // }, [
-  //   queryClient,
-  //   unitTypes,
-  //   view,
-  //   project,
-  //   debouncedCost,
-  //   cost,
-  //   debouncedArea,
-  //   area,
-  //   debouncedFloor,
-  //   floor,
-  // ]);
+  useEffect(
+    () =>
+      setActiveFiltersCount(
+        +searchParams.has("view") +
+          +searchParams.has("unitTypes") +
+          +searchParams.has("cost") +
+          +searchParams.has("floor") +
+          +searchParams.has("area")
+      ),
+    [searchParams]
+  );
 
   return (
     <>
@@ -187,7 +171,18 @@ function SearchPage() {
         />
         <hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
         <AnimatePresence mode="wait">
-          {project &&
+          {isLoading ? (
+            <div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4">
+              {Array.from({ length: STEP }).map((_, i) => (
+                <Skeleton
+                  key={i}
+                  borderRadius={16}
+                  className="2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]"
+                />
+              ))}
+            </div>
+          ) : (
+            project &&
             unitTypes &&
             debouncedCost &&
             debouncedArea &&
@@ -211,8 +206,17 @@ function SearchPage() {
                 {data?.pages.map((page) =>
                   page.map((unit) => <UnitCard key={unit.id} unit={unit} />)
                 )}
+                {isFetchingNextPage &&
+                  Array.from({ length: STEP }).map((_, i) => (
+                    <Skeleton
+                      key={"fetching-" + i}
+                      borderRadius={16}
+                      className="2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]"
+                    />
+                  ))}
               </motion.div>
-            )}
+            )
+          )}
         </AnimatePresence>
       </div>
       {showButtons && (
@@ -229,11 +233,11 @@ function SearchPage() {
               <FiltersIcon />
             </span>
             <span className="text-caption-m">Filters</span>
-            {/* {!!activeFiltersCount && (
+            {!!activeFiltersCount && (
               <div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
                 {activeFiltersCount}
               </div>
-            )} */}
+            )}
           </Button>
           <Button
             variant="secondary"