Suspenseful!

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();
 

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;

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>

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>