Fixed loader issues
This commit is contained in:
parent
d32f845893
commit
c9adf9b16f
3 changed files with 34 additions and 10 deletions
|
@ -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 />
|
||||||
|
|
|
@ -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! });
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue