adds suspense to prevent csr of feed

deepsingh132 · Nov 28, 2023 · 69d2aa8 · 69d2aa8
1 parent 095f183
commit 69d2aa8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,66 +1,68 @@
 import Sidebar from "@/components/Sidebar";
 import Widgets from "@/components/Widgets";
 import RefreshFeed from "@/components/RefreshFeed";
-import CommentModal from "@/components/CommentModal";
+import { Suspense } from "react";
+import Feed from "@/components/Feed";
 
 export default async function Home() {
   const { trendingPosts, randomUsersResults } = await getWidgetsData();
 
   return (
     <div>
-      <main className="flex  dark:bg-darkBg dark:text-darkText overflow-clip min-h-screen mx-auto">
-
+      <main
+        role="main"
+        className="flex  dark:bg-darkBg dark:text-darkText overflow-clip min-h-screen mx-auto"
+      >
         {/* Sidebar */}
         <Sidebar />
 
         <div className="flex flex-grow w-full">
           {/* Feed */}
-          <RefreshFeed />
+          <Suspense fallback={<Feed type={undefined} />}>
+            <RefreshFeed />
+          </Suspense>
 
           {/* Widgets */}
 
           <Widgets
-            trendingPosts={trendingPosts || []}
-            randomUsersResults={randomUsersResults?.results || []}
+            trendingPosts={trendingPosts}
+            randomUsersResults={randomUsersResults}
           />
         </div>
       </main>
     </div>
   );
-}
-
-async function getWidgetsData() {
 
-  if (!process.env.NEXT_PUBLIC_BACKEND_URL) {
-    return {
-      trendingPosts: [],
-      randomUsersResults: [],
-    };
-  }
-
-  // Trending posts section
-  // TODO: add backend route for trending posts
-  const trendingPosts =
-    await fetch(
-    `${process.env.NEXT_PUBLIC_BACKEND_URL}/widgets/trending/posts`
-  ).then((res) => res.json());
+  async function getWidgetsData() {
+    const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
 
-  // Who to follow section
+    if (!backendUrl || backendUrl === "undefined") {
+      return {
+        trendingPosts: [],
+        randomUsersResults: [],
+      };
+    }
 
-  let randomUsersResults: any = [];
+    try {
+      const trendingPostsRes = await fetch(
+        `${backendUrl}/widgets/trending/posts`
+      );
+      const randomUsersRes = await fetch(
+        "https://randomuser.me/api/?results=10&inc=name,login,picture"
+      );
 
-  try {
-    const res = await fetch(
-      "https://randomuser.me/api/?results=10&inc=name,login,picture"
-    );
+      const trendingPosts = await trendingPostsRes.json();
+      const randomUsersResults = await randomUsersRes.json();
 
-    randomUsersResults = await res.json();
-  } catch (e) {
-    randomUsersResults = [];
+      return {
+        trendingPosts: trendingPosts.trendingPosts,
+        randomUsersResults: randomUsersResults.results,
+      };
+    } catch (error) {
+      return {
+        trendingPosts: [],
+        randomUsersResults: [],
+      };
+    }
   }
-
-  return {
-    trendingPosts: trendingPosts?.trendingPosts,
-    randomUsersResults,
-  };
 }
diff --git a/components/Feed.tsx b/components/Feed.tsx
@@ -99,16 +99,18 @@ export default function Feed({ type }) {
     }
   };
 
-  if (!loading && posts.length === 0) {
+  if (!loading && posts?.length === 0) {
     return (
-      <div className="xl:ml-[350px] h-full border-l border-r border-lightBorderColor dark:border-darkBorderColor  xl:min-w-[680px] sm:ml-[82px] justify-center sm:w-[calc(100%-83px)] w-full content-center items-center flex-grow max-w-2xl">
+      <div className="xl:ml-[350px] h-full border-l border-r border-lightBorderColor dark:border-darkBorderColor  xl:min-w-[680px] sm:ml-[82px] justify-center sm:w-[calc(100%-82px)] w-screen content-center items-center flex-grow max-w-2xl">
         <Navbar title={undefined} />
         <Input
           updatePosts={updatePosts}
           text={undefined}
           id={undefined}
           style={undefined}
-          phoneInputModal={undefined} setCommentModalState={undefined}        />
+          phoneInputModal={undefined}
+          setCommentModalState={undefined}
+        />
         <div className="flex flex-col items-center justify-center h-[calc(100%-50%)]">
           <h1 className="text-2xl font-bold text-gray-700 dark:text-darkText">
             No posts found
@@ -203,14 +205,14 @@ export default function Feed({ type }) {
                 Create a post
               </h1>
               <div className="flex-1 ">
-              <Input
-                updatePosts={updatePosts}
-                style={`flex w-full mt-4 min-h-[50px] max-h-[100px] text-[15px] dark:bg-darkBg dark:text-darkText`}
-                phoneInputModal={closeModal}
-                text={undefined}
-                id={undefined}
-                setCommentModalState={undefined}
-              />
+                <Input
+                  updatePosts={updatePosts}
+                  style={`flex w-full mt-4 min-h-[50px] max-h-[100px] text-[15px] dark:bg-darkBg dark:text-darkText`}
+                  phoneInputModal={closeModal}
+                  text={undefined}
+                  id={undefined}
+                  setCommentModalState={undefined}
+                />
               </div>
             </div>
           </Modal>