shimmer effect on home page

jitunayak · Jun 5, 2024 · 2fc9c5e · 2fc9c5e
1 parent b688558
commit 2fc9c5e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/components/HomeResults.tsx b/src/components/HomeResults.tsx
@@ -4,6 +4,7 @@ import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { styled } from '@stitches/react';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect } from 'react';
+import { ShimmerSimpleGallery } from 'react-shimmer-effects';
 
 import HomeResultItem from './HomeResultItem';
 
@@ -65,7 +66,11 @@ function HomeResults() {
   }, [isLoading]);
 
   if (isLoading || !data || !isSuccess) {
-    return <span style={{ fontSize: '30px' }}>loading...</span>;
+    return (
+      <div style={{ width: '80rem' }}>
+        <ShimmerSimpleGallery caption card imageHeight={300} />
+      </div>
+    );
   }
 
   return (
@@ -86,7 +91,7 @@ function HomeResults() {
               item={item}
               key={item.id}
             />
-          ))
+          )),
         )}
         {hasNextPage &&
           new Array(4)

diff --git a/src/pages/Room/Reserve.tsx b/src/pages/Room/Reserve.tsx
@@ -65,15 +65,18 @@ const Reserve: React.FC<IProps> = ({ room }) => {
   const handleReserve = async () => {
     if (!reserveDates.checkIn || !reserveDates.checkOut) return;
     console.log(pathname);
+
     if (!isAuthenticated) {
       setLocalStorage('redirect_to', pathname);
       login();
     }
 
-    sendBookingConfirmation.mutateAsync({
-      checkInDate: reserveDates.checkIn,
-      checkOutDate: reserveDates.checkOut,
-    });
+    if (isAuthenticated) {
+      sendBookingConfirmation.mutateAsync({
+        checkInDate: reserveDates.checkIn,
+        checkOutDate: reserveDates.checkOut,
+      });
+    }
   };
 
   return (

diff --git a/src/types/react-shimmer-effect.d.ts b/src/types/react-shimmer-effect.d.ts
@@ -5,4 +5,8 @@ declare module 'react-shimmer-effects' {
   ): JSX.Element;
   export function ShimmerTitle(props: ShimmerTitleProps): JSX.Element;
   // Add other function declarations here
+
+  export function ShimmerSimpleGallery(
+    props: ShimmerSimpleGalleryProps,
+  ): JSX.Element;
 }