feat: integrate loader skeleton with 404 page

farhan-helmy · Aug 26, 2023 · c7fda7a · c7fda7a
1 parent 6ffc703
commit c7fda7a
Showing 1 changed file with 38 additions and 32 deletions.
diff --git a/src/components/SurauReview.tsx b/src/components/SurauReview.tsx
@@ -65,37 +65,41 @@ const SurauReview = () => {
   };
 
   if (!rating?.data) {
-    // return (
-    //   <section className="bg-white">
-    //     <div className="relative bg-gray-900">
-    //       <Header />
-    //     </div>
-    //     <div className="py-18 mx-auto max-w-2xl px-4 sm:py-24 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
-    //       <SkeletonLoader className="gap-2 overflow-hidden lg:col-span-4">
-    //         <SkeletonRectangle height={24} />
-    //         <SkeletonRectangle height={32} marginTop={4} marginBottom={8} />
-    //         <SkeletonRectangle height={288} marginBottom={8} />
-    //         <SkeletonRectangle
-    //           flexDirection="row"
-    //           lines={1}
-    //           width="w-[144px]"
-    //           height={96}
-    //           gap={8}
-    //         />
-    //         <SkeletonRectangle height={28} marginTop={32} />
-    //         <SkeletonRectangle height={40} marginTop={4} />
-    //         <SkeletonRectangle height={28} marginTop={16} />
-    //         <SkeletonRectangle height={40} marginTop={4} />
-    //         <SkeletonRectangle height={28} marginTop={24} />
-    //         <SkeletonRectangle height={32} marginTop={16} />
-    //         <SkeletonRectangle height={20} marginTop={12} marginBottom={24} />
-    //         <SkeletonRectangle height={20} lines={5} gap={12} />
-    //       </SkeletonLoader>
-    //     </div>
-    //   </section>
-    // );
+    // if is still fetching rating, show the skeleton, otherwise show 404 page
+    if (!rating.isFetched) {
+      return (
+        <section className="bg-white">
+          <div className="relative bg-gray-900">
+            <Header />
+          </div>
+          <div className="py-18 mx-auto max-w-2xl px-4 sm:py-24 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+            <SkeletonLoader className="gap-2 overflow-hidden lg:col-span-4">
+              <SkeletonRectangle height={24} />
+              <SkeletonRectangle height={32} marginTop={4} marginBottom={8} />
+              <SkeletonRectangle height={288} marginBottom={8} />
+              <SkeletonRectangle
+                flexDirection="row"
+                lines={1}
+                width="w-[144px]"
+                height={96}
+                gap={8}
+              />
+              <SkeletonRectangle height={28} marginTop={32} />
+              <SkeletonRectangle height={40} marginTop={4} />
+              <SkeletonRectangle height={28} marginTop={16} />
+              <SkeletonRectangle height={40} marginTop={4} />
+              <SkeletonRectangle height={28} marginTop={24} />
+              <SkeletonRectangle height={32} marginTop={16} />
+              <SkeletonRectangle height={20} marginTop={12} marginBottom={24} />
+              <SkeletonRectangle height={20} lines={5} gap={12} />
+            </SkeletonLoader>
+          </div>
+        </section>
+      );
+    } else {
+      return <NotFound404 />;
+    }
     // return <div>Loading...</div>; // or handle the case in a different way
-    return <NotFound404 />;
   }
 
   return (
@@ -187,7 +191,7 @@ const SurauReview = () => {
           <Header />
         </div>
 
-        <div className="py-18 mx-auto max-w-2xl px-4 sm:pb-24 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+        <div className="py-18 mx-auto max-w-2xl px-4 pt-10 sm:px-6 sm:pb-24 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
           <div className="lg:col-span-4">
             {surau.data ? (
               <SurauOverview surau={surau.data} />
@@ -199,7 +203,9 @@ const SurauReview = () => {
               {surau.data?.is_solat_jumaat && (
                 <Badge color="green" text="Solat Jumaat" />
               )}
-              {surau.data?.is_qiblat_certified && <Badge color="purple" text="Qiblat Certified" />}
+              {surau.data?.is_qiblat_certified && (
+                <Badge color="purple" text="Qiblat Certified" />
+              )}
             </div>
             <div className="mt-2">
               <h3 className="text-lg font-medium text-gray-900">Direction</h3>