From 84de59a4624d4f88d6d190cee33d7d8154ee5aa3 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 12:57:13 -0600
Subject: [PATCH] Suspenseful!

---
 src/app/_components/RoomList.tsx | 4 ++++
 src/app/_components/VoteUI.tsx   | 5 ++++-
 src/app/dashboard/page.tsx       | 6 ++----
 src/app/room/[id]/page.tsx       | 6 ++----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/_components/RoomList.tsx b/src/app/_components/RoomList.tsx
index e7fcb75..35ec0e4 100644
--- a/src/app/_components/RoomList.tsx
+++ b/src/app/_components/RoomList.tsx
@@ -9,6 +9,10 @@ import { trpc } from "../_trpc/client";
 import Loading from "./Loading";
 import { useUser } from "@clerk/nextjs";
 
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
+
 const RoomList = () => {
   const { isSignedIn, user } = useUser();
 
diff --git a/src/app/_components/VoteUI.tsx b/src/app/_components/VoteUI.tsx
index 31b8259..4c394f0 100644
--- a/src/app/_components/VoteUI.tsx
+++ b/src/app/_components/VoteUI.tsx
@@ -25,9 +25,12 @@ import { isAdmin, isVIP, jsonToCsv } from "@/utils/helpers";
 import type { PresenceItem } from "@/utils/types";
 import { trpc } from "@/app/_trpc/client";
 import Loading from "@/app/_components/Loading";
-import { User } from "@clerk/nextjs/dist/types/server";
 import { useUser } from "@clerk/nextjs";
 
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
+
 const VoteUI = () => {
   const params = useParams();
   const roomId = params?.id as string;
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index aa1256c..a69f82a 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,12 +4,10 @@ import { GiStarFormation } from "react-icons/gi";
 import { isAdmin, isVIP } from "@/utils/helpers";
 import { currentUser } from "@clerk/nextjs";
 import { Suspense } from "react";
+import Loading from "../_components/Loading";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
-export const dynamic = "force-dynamic";
-export const revalidate = 0;
-export const fetchCache = "force-no-store";
 
 export default async function Dashboard() {
   const user = await currentUser();
@@ -26,7 +24,7 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      <Suspense>
+      <Suspense fallback={<Loading />}>
         <RoomList />
       </Suspense>
     </div>
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index e2f8328..872346c 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -1,16 +1,14 @@
+import Loading from "@/app/_components/Loading";
 import VoteUI from "@/app/_components/VoteUI";
 import { Suspense } from "react";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
-export const dynamic = "force-dynamic";
-export const revalidate = 0;
-export const fetchCache = "force-no-store";
 
 export default async function Room() {
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
-      <Suspense>
+      <Suspense fallback={<Loading />}>
         <VoteUI />
       </Suspense>
     </div>