trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix SSR and automerge timing

Browse source 
SSR fix:
- ClientOnly wrapper prevents Leaflet/Yjs from running during SSR
- SessionView lazy-loaded to avoid browser API usage on server

Automerge fix:
- Set MERGE_READY_STATE to 'clean' only (was including 'unstable')
- Prevents merging before all CI checks complete

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-23 00:49:54 +01:00
parent e0cce17b8d
commit e40b7dc199
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
4 changed files with 96 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.github/workflows/automerge.yml vendored
View file

@ -30,4 +30,5 @@ jobs:
MERGE_LABELS: "automerge"
MERGE_METHOD: "merge"
MERGE_DELETE_BRANCH: "true"
MERGE_READY_STATE: "clean"
UPDATE_METHOD: "rebase"

17
apps/planner/app/components/ClientOnly.tsx Normal file
View file

@ -0,0 +1,17 @@
import { useState, useEffect, type ReactNode } from "react";
export function ClientOnly({
children,
fallback = null,
}: {
children: () => ReactNode;
fallback?: ReactNode;
}) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return mounted ? <>{children()}</> : <>{fallback}</>;
}

62
apps/planner/app/components/SessionView.tsx Normal file
View file

@ -0,0 +1,62 @@
import { Suspense, lazy } from "react";
import { useYjs } from "~/lib/use-yjs";
import { useRouting } from "~/lib/use-routing";
const PlannerMap = lazy(() =>
import("~/components/PlannerMap").then((m) => ({ default: m.PlannerMap })),
);
const WaypointSidebar = lazy(() =>
import("~/components/WaypointSidebar").then((m) => ({ default: m.WaypointSidebar })),
);
export function SessionView({ sessionId }: { sessionId: string }) {
const yjs = useYjs(sessionId);
const { isHost, computing, routeStats, requestRoute } = useRouting(yjs);
if (!yjs) {
return (
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Connecting...</p>
</div>
);
}
return (
<>
<header className="flex items-center justify-between border-b border-gray-200 px-4 py-2">
<h1 className="text-lg font-semibold text-gray-900">trails.cool Planner</h1>
<div className="flex items-center gap-3">
{computing && (
<span className="text-xs text-blue-600">Computing route...</span>
)}
{isHost && (
<span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">
Host
</span>
)}
<span className="text-sm text-gray-500">
{yjs.connected ? "Connected" : "Connecting..."} · {sessionId.slice(0, 8)}
</span>
</div>
</header>
<div className="flex flex-1 overflow-hidden">
<main className="flex-1">
<Suspense
fallback={
<div className="flex h-full items-center justify-center bg-gray-100 text-gray-500">
Loading map...
</div>
}
>
<PlannerMap yjs={yjs} onRouteRequest={requestRoute} />
</Suspense>
</main>
<aside className="w-72 border-l border-gray-200 bg-white">
<Suspense fallback={null}>
<WaypointSidebar yjs={yjs} routeStats={routeStats} />
</Suspense>
</aside>
</div>
</>
);
}

61
apps/planner/app/routes/session.$id.tsx
View file

@ -2,15 +2,11 @@ import { useParams } from "react-router";
import type { Route } from "./+types/session.$id";
import { getSession } from "~/lib/sessions";
import { data } from "react-router";
import { useYjs } from "~/lib/use-yjs";
import { useRouting } from "~/lib/use-routing";
import { ClientOnly } from "~/components/ClientOnly";
import { lazy, Suspense } from "react";
const PlannerMap = lazy(() =>
import("~/components/PlannerMap").then((m) => ({ default: m.PlannerMap })),
);
const WaypointSidebar = lazy(() =>
import("~/components/WaypointSidebar").then((m) => ({ default: m.WaypointSidebar })),
const SessionView = lazy(() =>
import("~/components/SessionView").then((m) => ({ default: m.SessionView })),
);
export function meta(_args: Route.MetaArgs) {
@ -30,53 +26,28 @@ export async function loader({ params }: Route.LoaderArgs) {
export default function SessionPage() {
const { id } = useParams();
const yjs = useYjs(id!);
const { isHost, computing, routeStats, requestRoute } = useRouting(yjs);
if (!yjs) {
return (
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Connecting...</p>
</div>
);
}
return (
<div className="flex h-full flex-col">
<header className="flex items-center justify-between border-b border-gray-200 px-4 py-2">
<h1 className="text-lg font-semibold text-gray-900">trails.cool Planner</h1>
<div className="flex items-center gap-3">
{computing && (
<span className="text-xs text-blue-600">Computing route...</span>
)}
{isHost && (
<span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">
Host
</span>
)}
<span className="text-sm text-gray-500">
{yjs.connected ? "Connected" : "Connecting..."} · {id?.slice(0, 8)}
</span>
</div>
</header>
<div className="flex flex-1 overflow-hidden">
<main className="flex-1">
<ClientOnly
fallback={
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Loading planner...</p>
</div>
}
>
{() => (
<Suspense
fallback={
<div className="flex h-full items-center justify-center bg-gray-100 text-gray-500">
Loading map...
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Loading planner...</p>
</div>
}
>
<PlannerMap yjs={yjs} onRouteRequest={requestRoute} />
<SessionView sessionId={id!} />
</Suspense>
</main>
<aside className="w-72 border-l border-gray-200 bg-white">
<Suspense fallback={null}>
<WaypointSidebar yjs={yjs} routeStats={routeStats} />
</Suspense>
</aside>
</div>
)}
</ClientOnly>
</div>
);
}