Fixed loader issues

This commit is contained in:
Atridad Lahiji 2023-11-28 17:11:32 -07:00
parent d32f845893
commit c9adf9b16f
No known key found for this signature in database
3 changed files with 34 additions and 10 deletions

View file

@ -1,5 +1,5 @@
import { rootAuthLoader } from "@clerk/remix/ssr.server"; import { rootAuthLoader } from "@clerk/remix/ssr.server";
import { ClerkApp, ClerkErrorBoundary, ClerkLoaded } from "@clerk/remix"; import { ClerkApp, ClerkErrorBoundary } from "@clerk/remix";
import type { import type {
LinksFunction, LinksFunction,
LoaderFunction, LoaderFunction,
@ -42,13 +42,11 @@ function App() {
<Links /> <Links />
</head> </head>
<body className="h-[100%] w-[100%] fixed overflow-y-auto"> <body className="h-[100%] w-[100%] fixed overflow-y-auto">
<ClerkLoaded>
<Header title={"Sprint Padawan"} /> <Header title={"Sprint Padawan"} />
<div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]"> <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
<Outlet /> <Outlet />
</div> </div>
<Footer /> <Footer />
</ClerkLoaded>
<ScrollRestoration /> <ScrollRestoration />
<Scripts /> <Scripts />

View file

@ -5,7 +5,7 @@ import { LogInIcon, ShieldIcon, StarIcon, TrashIcon } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import LoadingIndicator from "~/components/LoadingIndicator"; import LoadingIndicator from "~/components/LoadingIndicator";
import { useEventSource } from "remix-utils/sse/react"; import { useEventSource } from "remix-utils/sse/react";
import { useUser } from "@clerk/remix"; import { ClerkLoaded, ClerkLoading, useUser } from "@clerk/remix";
import { isAdmin, isVIP } from "~/services/helpers.client"; import { isAdmin, isVIP } from "~/services/helpers.client";
export const loader: LoaderFunction = async (args) => { export const loader: LoaderFunction = async (args) => {
@ -37,6 +37,19 @@ type RoomsResponse =
| undefined; | undefined;
export default function Dashboard() { export default function Dashboard() {
return (
<>
<ClerkLoaded>
<DashboardContent />
</ClerkLoaded>
<ClerkLoading>
<LoadingIndicator />
</ClerkLoading>
</>
);
}
function DashboardContent() {
const { user, isLoaded } = useUser(); const { user, isLoaded } = useUser();
let roomsFromDb = useEventSource("/api/room/get/all", { event: user?.id! }); let roomsFromDb = useEventSource("/api/room/get/all", { event: user?.id! });

View file

@ -23,7 +23,7 @@ import {
VoteResponse, VoteResponse,
} from "~/services/types.client"; } from "~/services/types.client";
import { isAdmin, jsonToCsv } from "~/services/helpers.client"; import { isAdmin, jsonToCsv } from "~/services/helpers.client";
import { useUser } from "@clerk/remix"; import { ClerkLoaded, ClerkLoading, useUser } from "@clerk/remix";
import { db } from "~/services/db.server"; import { db } from "~/services/db.server";
import { rooms } from "~/services/schema"; import { rooms } from "~/services/schema";
import { eq } from "drizzle-orm"; import { eq } from "drizzle-orm";
@ -73,6 +73,19 @@ export function ErrorBoundary() {
} }
export default function Room() { export default function Room() {
return (
<>
<ClerkLoaded>
<RoomContent />
</ClerkLoaded>
<ClerkLoading>
<LoadingIndicator />
</ClerkLoading>
</>
);
}
function RoomContent() {
const { user } = useUser(); const { user } = useUser();
const params = useParams(); const params = useParams();
const roomId = params.roomId; const roomId = params.roomId;