Page spinner to tsx

Team-Tritan · Jun 12, 2022 · 7988a2d · 7988a2d
1 parent ef31893
commit 7988a2d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx
@@ -3,8 +3,9 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import Navbar from '../../components/Nav/Navbar';
-import Post from '../../components/Feed/Post';
+import Post from '../../components/Feed/SinglePost';
 import Error from '../../components/Hero/Error';
+import Spinner from '../../components/Feed/Spinner';
 
 export default function viewPost() {
     // Use the router to grab req.query
@@ -45,14 +46,21 @@ export default function viewPost() {
 
     // Return nav bar if loading
     if (isLoading) {
-        return <Navbar />;
+        return (
+            <>
+                <Navbar />
+                <Spinner />
+            </>
+        );
     }
 
-    // Return UI, passing data to Post component
-    return (
-        <>
-            <Navbar />
-            <Post post={postData} />
-        </>
-    );
+    if (!isLoading) {
+        // Return UI, passing data to Post component
+        return (
+            <>
+                <Navbar />
+                <Post post={postData} />
+            </>
+        );
+    }
 }
diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import Navbar from '../../components/Nav/Navbar';
 import Feed from '../../components/Feed/Feed';
+import Spinner from '../../components/Feed/Spinner';
 
 export default function viewFeed() {
     // useState to manage data fetching with useEffect
@@ -24,7 +25,12 @@ export default function viewFeed() {
 
     // Return nav bar if loading
     if (isLoading) {
-        return <Navbar />;
+        return (
+            <>
+                <Navbar />
+                <Spinner />
+            </>
+        );
     }
 
     // Return UI, passing data to Feed component