atridad/pollo
1
0
Fork 0
Code Activity Actions

Fixed loader issues

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/root.tsx
View file

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

15
app/routes/dashboard.tsx
View file

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

15
app/routes/room.$roomId.tsx
View file

@ -23,7 +23,7 @@ import {
VoteResponse,
} from "~/services/types.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 { rooms } from "~/services/schema";
import { eq } from "drizzle-orm";
@ -73,6 +73,19 @@ export function ErrorBoundary() {
}
export default function Room() {
return (
<>
<ClerkLoaded>
<RoomContent />
</ClerkLoaded>
<ClerkLoading>
<LoadingIndicator />
</ClerkLoading>
</>
);
}
function RoomContent() {
const { user } = useUser();
const params = useParams();
const roomId = params.roomId;