Fix caching by only set menu collapse state header when values have changed

app/actions/menu-collapse/server.ts

@@ -51,17 +51,43 @@ export let menuCollapseStateMiddleware: unstable_MiddlewareFunction<
 
   let res = await next();
 
+  // If the state hasn't changed, don't set the cookie
+  // the state could be changed by the menu collapse action
+  let currentState = menuCollapse.get();
+  if (statesEqual(menuCollapseCookieState, currentState)) {
+    return res;
+  }
+
   res.headers.append(
     "Set-Cookie",
     await cookie.serialize({
-      // Check the context again, because it could be mutated by the action
-      menuCollapseState: menuCollapse.get(),
+      menuCollapseState: currentState,
     }),
   );
 
   return res;
 };
 
+function statesEqual(
+  state1: MenuCollapseState,
+  state2: MenuCollapseState,
+): boolean {
+  const keys1 = Object.keys(state1);
+  const keys2 = Object.keys(state2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (state1[key] !== state2[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 async function parseMenuCollapseState(
   request: Request,
 ): Promise<MenuCollapseState> {

app/pages/healthcheck.tsx

@@ -1,20 +1,5 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderFunction } from "react-router";
 
-export const loader: LoaderFunction = async ({ request }) => {
-  // const host =
-  //   request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
-
-  // try {
-  //   const url = new URL("/", `http://${host}`);
-  //   await Promise.all([
-  //     fetch(url.toString(), { method: "HEAD" }).then((r) => {
-  //       if (!r.ok) return Promise.reject(r);
-  //     }),
-  //   ]);
+export async function loader() {
   return new Response("OK");
-  // } catch (error: unknown) {
-  //   console.log("healthcheck ❌", { error });
-  //   return new Response("ERROR", { status: 500 });
-  // }
-};
+}