No root loader if inside ErrorBoundary

Author: fileformat

app/components/AuthButton.tsx

@@ -3,7 +3,9 @@ import { PiUserCircle, PiUserCircleFill } from "react-icons/pi";
 import { RootLoaderData } from "~/types/RootLoaderData";
 
 export function AuthButton() {
-    const { user } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
+    const rootData = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
+
+    const user = rootData?.user;
 
     let authImage:JSX.Element = <PiUserCircle title={"Not logged in"} />;
     if (user) {

app/components/ColorSchemeToggle.tsx

@@ -26,7 +26,14 @@ function getColorScheme(defaultTheme?: "light" | "dark") {
 }
 
 export function ColorSchemeToggle() {
-  const { theme } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
+  const rootData = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
+  const theme = rootData?.theme;
+
+  return theme ? <ColorSchemeToggleComponent theme={theme} /> : null;
+}
+
+function ColorSchemeToggleComponent({ theme }: { theme: "light" | "dark"}) {
+
   const [ currentScheme, setColorScheme ] = React.useState(getColorScheme(theme));
 
   const onClick = (scheme: 'light' | 'dark' | 'auto') => {

app/routes/links.archive.$year._index.tsx

@@ -10,6 +10,7 @@ import { authenticator } from "~/services/auth.server";
 import LinksTable from "~/components/LinksTable";
 import { PiArrowFatUpBold, PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi";
 import { MIN_ARCHIVE_YEAR } from "~/util/constants";
+import { RootLoaderData } from "~/types/RootLoaderData";
 
 export const meta: MetaFunction = ({ params }) => {
     return [
@@ -39,7 +40,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
 export default function Index() {
     const params = useParams();
-    const user = useRouteLoaderData<User | null>("root");
+    const { user } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
     const data = useLoaderData<typeof loader>();
 
     const currentYear = new Date().getFullYear();