Add new feature and creating LoadingSkeleton (SOS-RS#115)

* Add new feature and creating LoadingSkeleton

Author: Marcos-Nacimento

src/components/LoadingSkeleton/LoadingSkeleton.tsx

@@ -0,0 +1,46 @@
+type LoadingSkeletonProps = {
+    amountItems: number
+}
+
+const LoadingSkeleton = ({ amountItems }: LoadingSkeletonProps) => {
+    return (
+        <div className="w-full">
+            <ul className="grid grid-cols-1 gap-5 mt-4">
+                {Array.from({length: amountItems,}).map((_, index) => (
+                    <li key={index} className="p-4 w-full border-2 border-border rounded-md space-y-3">
+                        <div className="flex justify-between items-center space-x-2">
+                            <div className="animate-pulse h-10 bg-[#ccc] rounded-md w-full max-w-sm" />
+                            <div className="animate-pulse h-10 bg-[#ccc] rounded-md w-10" />
+                        </div>
+
+                        <div className="animate-pulse h-10 bg-[#ccc] rounded-md w-full max-w-xs" />
+
+                        <div className="border-b border-[#ccc] opacity-25"/>
+
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 md:grid-cols-4 gap-4 mt-5">
+                            {Array.from({length: 7}).map((_, index) => (
+                                <div
+                                    key={index}
+                                    className="animate-pulse h-8 bg-[#ccc] rounded-full w-full"
+                                />
+                            ))}
+                        </div>
+
+                        <div className="border-b border-[#ccc] opacity-25"/>
+
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 md:grid-cols-4 gap-4 mt-5">
+                            {Array.from({length: 7}).map((_, index) => (
+                                <div
+                                    key={index}
+                                    className="animate-pulse h-8 bg-[#ccc] rounded-full w-full"
+                                />
+                            ))}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export { LoadingSkeleton }

src/components/LoadingSkeleton/index.ts

@@ -0,0 +1,3 @@
+import { LoadingSkeleton } from "./LoadingSkeleton";
+
+export { LoadingSkeleton }

src/pages/Home/components/ShelterListView/ShelterListView.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { CircleAlert, ListFilter, Loader } from 'lucide-react';
+import { CircleAlert, ListFilter } from 'lucide-react';
 
 import {
   Alert,
@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
 import { useSearchParams } from 'react-router-dom';
+import { LoadingSkeleton } from '@/components/LoadingSkeleton';
 
 const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
   (props, ref) => {
@@ -73,7 +74,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
         </div>
         <main ref={ref} className="flex flex-col gap-4" {...rest}>
           {loading ? (
-            <Loader className="justify-self-center self-center w-5 h-5 animate-spin" />
+            <LoadingSkeleton amountItems={4}/>
           ) : data.length === 0 ? (
             <NoFoundSearch />
           ) : (