fix: handle empty ACLs

app/routes/acls/acl-loader.ts

@@ -38,8 +38,11 @@ export async function aclLoader({ request, context }: Route.LoaderArgs) {
     return flags;
   } catch (error) {
     if (isDataWithApiError(error)) {
+      // Headscale returns "acl policy not found" when the policy mode is
+      // set to file but no file exists, and returns a 500 when database
+      // mode is used but the policies table is empty.
       // https://github.com/juanfont/headscale/blob/c4600346f9c29b514dc9725ac103efb9d0381f23/hscontrol/types/policy.go#L10
-      if (error.data.rawData.includes("acl policy not found")) {
+      if (error.data.rawData.includes("acl policy not found") || error.data.statusCode === 500) {
         flags.policy = "";
         flags.writable = true;
         return flags;

app/routes/acls/overview.tsx

@@ -1,5 +1,5 @@
 import { AlertCircle, Construction, Eye, FlaskConical, Pencil } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { isRouteErrorResponse, useFetcher, useRevalidator } from "react-router";
 
 import Button from "~/components/button";
@@ -15,7 +15,14 @@ import toast from "~/utils/toast";
 import type { Route } from "./+types/overview";
 import { aclAction } from "./acl-action";
 import { aclLoader } from "./acl-loader";
-import { Differ, Editor } from "./components/cm.client";
+import Fallback from "./components/fallback";
+
+const LazyEditor = lazy(() =>
+  import("./components/cm.client").then((m) => ({ default: m.Editor })),
+);
+const LazyDiffer = lazy(() =>
+  import("./components/cm.client").then((m) => ({ default: m.Differ })),
+);
 
 export const loader = aclLoader;
 export const action = aclAction;
@@ -101,10 +108,14 @@ export default function Page({ loaderData: { access, writable, policy } }: Route
           </TabsTab>
         </TabsList>
         <TabsPanel value="edit">
-          <Editor isDisabled={disabled} onChange={setCodePolicy} value={codePolicy} />
+          <Suspense fallback={<Fallback acl={codePolicy} />}>
+            <LazyEditor isDisabled={disabled} onChange={setCodePolicy} value={codePolicy} />
+          </Suspense>
         </TabsPanel>
         <TabsPanel value="diff">
-          <Differ left={policy} right={codePolicy} />
+          <Suspense fallback={<Fallback acl={codePolicy} />}>
+            <LazyDiffer left={policy} right={codePolicy} />
+          </Suspense>
         </TabsPanel>
         <TabsPanel value="preview">
           <div className="flex flex-col items-center py-8">