Web/fix intial render

apps/web/src/root.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react'
-import { Outlet, useLoaderData } from 'react-router'
+import { Outlet, useLoaderData, useRouteLoaderData } from 'react-router'
 
 import { Types, makeOpenGraphWebsite } from '@suddenlygiovanni/open-graph-protocol'
 
@@ -69,7 +69,8 @@ export function loader({ request }: Route.LoaderArgs) {
 
 export function Layout({ children }: { children: ReactNode }): ReactElement {
 	// if there was an error running the loader, data could be missing
-	const data = useLoaderData<typeof loader | null>()
+	const data = useRouteLoaderData<typeof loader>('root')
+
 	const theme = useOptionalTheme()
 	return (
 		<Document

apps/web/src/shell/header.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement, type SyntheticEvent, memo, useCallback, useMemo } from 'react'
+import type { ReactElement, SyntheticEvent } from 'react'
 
 import { Layout } from '@suddenlygiovanni/ui/components/layout/layout.tsx'
 import { NavigationMenuToggle } from '@suddenlygiovanni/ui/components/navigation-menu-toggle/navigation-menu-toggle.tsx'
@@ -24,45 +24,13 @@ const routes = (
 
 const PRIMARY_NAVIGATION = 'primary-navigation'
 
-export const Header = memo(function Header({
-	theme,
-}: { theme: 'light' | 'dark' | null }): ReactElement {
+export function Header({ theme }: { theme: 'light' | 'dark' | null }): ReactElement {
 	const [isMobileNavigationVisible, toggleMobileNavigationVisibility] = useToggle(false)
 
-	const handleMobileNavigationClick = useCallback(
-		<T extends HTMLElement>(event: SyntheticEvent<T>) => {
-			event.stopPropagation()
-			toggleMobileNavigationVisibility()
-		},
-		[toggleMobileNavigationVisibility],
-	)
-
-	const renderLi = useMemo(
-		() =>
-			routes.map(({ title, url, uri, description, disabled }) => (
-				<li
-					className={clsx(
-						'flex min-h-16 min-w-32 items-center justify-end outline-hidden md:min-h-fit md:min-w-fit',
-					)}
-					key={uri}
-					// onClick={stopPropagation}
-				>
-					<NavLink
-						aria-disabled={disabled ? 'true' : undefined}
-						aria-label={description}
-						onClick={handleMobileNavigationClick}
-						prefetch="intent"
-						role="menuitem"
-						to={url}
-						tabIndex={0}
-					>
-						{title}
-					</NavLink>
-				</li>
-			)),
-
-		[handleMobileNavigationClick],
-	)
+	function handleMobileNavigationClick<T extends HTMLElement>(event: SyntheticEvent<T>): void {
+		event.stopPropagation()
+		toggleMobileNavigationVisibility()
+	}
 
 	return (
 		<Layout.Header
@@ -105,7 +73,26 @@ export const Header = memo(function Header({
 						onClick={handleMobileNavigationClick}
 						onKeyDown={handleMobileNavigationClick}
 					>
-						{renderLi}
+						{routes.map(({ title, url, uri, description, disabled }) => (
+							<li
+								className={clsx(
+									'flex min-h-16 min-w-32 items-center justify-end outline-hidden md:min-h-fit md:min-w-fit',
+								)}
+								key={uri}
+							>
+								<NavLink
+									aria-disabled={disabled ? 'true' : undefined}
+									aria-label={description}
+									onClick={handleMobileNavigationClick}
+									prefetch="intent"
+									role="menuitem"
+									to={url}
+									tabIndex={0}
+								>
+									{title}
+								</NavLink>
+							</li>
+						))}
 						<ThemeSwitch
 							userPreference={theme}
 							className="ml-16 aspect-square"
@@ -115,4 +102,4 @@ export const Header = memo(function Header({
 			</div>
 		</Layout.Header>
 	)
-})
+}

packages/ui/src/components/mode-toggle/mode-toggle.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, memo, useMemo } from 'react'
+import type { FC, MouseEventHandler } from 'react'
 
 import { Icons } from '#components/icons/icons.tsx'
 import { clsx } from '#lib/utils.ts'
@@ -19,13 +19,15 @@ interface ModeToggleProps {
 }
 
 const NAME = 'ModeToggle'
-const ModeToggle = memo(function ModeToggle({
-	setTheme,
-	theme,
-	className,
-}: ModeToggleProps): ReactNode {
-	const isLight = useMemo<boolean>(() => theme === 'light', [theme])
-	const isDark = useMemo<boolean>(() => theme === 'dark', [theme])
+const ModeToggle: FC<ModeToggleProps> = ({ setTheme, theme, className }) => {
+	const isLight = theme === 'light'
+	const isDark = theme === 'dark'
+
+	function makeToggleHandler(mode: Theme): MouseEventHandler<HTMLDivElement> {
+		return function toggleHandler(_) {
+			setTheme(mode)
+		}
+	}
 
 	return (
 		<DropdownMenu>
@@ -37,9 +39,9 @@ const ModeToggle = memo(function ModeToggle({
 					data-testid={NAME}
 				>
 					{isLight || theme === null ? (
-						<Icons.moon className={clsx('h-[1.2rem]', 'w-[1.2rem]')} />
+						<Icons.moon className={clsx('h-[1.2rem] w-[1.2rem]')} />
 					) : (
-						<Icons.sun className={clsx('h-[1.2rem]', 'w-[1.2rem]')} />
+						<Icons.sun className={clsx('h-[1.2rem] w-[1.2rem]')} />
 					)}
 
 					<span className="sr-only">Toggle theme</span>
@@ -48,20 +50,20 @@ const ModeToggle = memo(function ModeToggle({
 			<DropdownMenuContent align="end">
 				<DropdownMenuItem
 					disabled={isLight}
-					onClick={(): void => setTheme('light')}
+					onClick={makeToggleHandler('light')}
 				>
 					Light
 				</DropdownMenuItem>
 				<DropdownMenuItem
 					disabled={isDark}
-					onClick={(): void => setTheme('dark')}
+					onClick={makeToggleHandler('dark')}
 				>
 					Dark
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	)
-})
+}
 ModeToggle.displayName = NAME
 
 export { ModeToggle }