mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-06-01 00:13:20 -05:00
3925b73d32
Strict improvement because we avoid the flash on clientside navigation. One practical bug was scroll restoration between tournament teams list and user page. When user pressed back they ended up at the bottom of the page because the placeholder (smaller height than actual content) rendered. With useHydrated this placeholder is no longer rendered for client side navigations.
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { lazy } from "react";
|
|
import type { MetaFunction } from "react-router";
|
|
import { Placeholder } from "~/components/Placeholder";
|
|
import { useHydrated } from "~/hooks/useHydrated";
|
|
import { metaTags } from "~/utils/remix";
|
|
import type { SendouRouteHandle } from "~/utils/remix.server";
|
|
import { navIconUrl, PLANNER_URL } from "~/utils/urls";
|
|
|
|
import "../plans-global.css";
|
|
|
|
export const meta: MetaFunction = (args) => {
|
|
return metaTags({
|
|
title: "Map Planner",
|
|
ogTitle: "Splatoon 3 Map planner",
|
|
description:
|
|
"Make perfect Splatoon 3 battle plans by drawing on maps and adding weapon images",
|
|
location: args.location,
|
|
});
|
|
};
|
|
|
|
export const handle: SendouRouteHandle = {
|
|
i18n: ["weapons"],
|
|
breadcrumb: () => ({
|
|
imgPath: navIconUrl("plans"),
|
|
href: PLANNER_URL,
|
|
type: "IMAGE",
|
|
}),
|
|
};
|
|
|
|
const Planner = lazy(() => import("~/features/map-planner/components/Planner"));
|
|
|
|
export default function MapPlannerPage() {
|
|
const isHydrated = useHydrated();
|
|
|
|
if (!isHydrated) return <Placeholder />;
|
|
|
|
return <Planner />;
|
|
}
|