PLS!

src/app/_components/LoadingIndicator.tsx

@@ -1,6 +1,4 @@
-"use client";
+const LoadingIndicator = () => {
-
-const Loading = () => {
   return (
     <div className="flex items-center justify-center">
       <span className="loading loading-dots loading-lg"></span>
@@ -8,4 +6,4 @@ const Loading = () => {
   );
 };
 
-export default Loading;
+export default LoadingIndicator;

src/app/_components/RoomList.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { env } from "@/env.mjs";
 import { trpc } from "../_trpc/client";
-import Loading from "./Loading";
+import LoadingIndicator from "./LoadingIndicator";
 import { useUser } from "@clerk/nextjs";
 
 export const dynamic = "force-dynamic";
@@ -137,7 +137,7 @@ const RoomList = () => {
         New Room
       </label>
 
-      {roomsFromDb === undefined && <Loading />}
+      {roomsFromDb === undefined && <LoadingIndicator />}
     </div>
   );
 };

src/app/_components/VoteUI.tsx

@@ -24,7 +24,7 @@ import { env } from "@/env.mjs";
 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 LoadingIndicator from "@/app/_components/LoadingIndicator";
 import { useUser } from "@clerk/nextjs";
 
 export const dynamic = "force-dynamic";
@@ -211,7 +211,7 @@ const VoteUI = () => {
 
   // Room is loading
   if (roomFromDb === undefined) {
-    return <Loading />;
+    return <LoadingIndicator />;
     // Room has been loaded
   } else if (roomFromDb) {
     return (

src/app/dashboard/page.tsx

@@ -3,11 +3,12 @@ import { FaShieldAlt } from "react-icons/fa";
 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();
@@ -24,9 +25,7 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      <Suspense fallback={<Loading />}>
+      <RoomList />
-        <RoomList />
-      </Suspense>
     </div>
   );
 }

src/app/room/[id]/loading.tsx

@@ -0,0 +1,6 @@
+import LoadingIndicator from "@/app/_components/LoadingIndicator";
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <LoadingIndicator />;
+}

src/app/room/[id]/page.tsx

@@ -1,16 +1,15 @@
-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 function Room() {
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
-      <Suspense fallback={<Loading />}>
+      <VoteUI />
-        <VoteUI />
-      </Suspense>
     </div>
   );
 }