From 588f064c2585e291fff9c9555477a78a10d34a8d Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 6 Feb 2026 03:53:14 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20make=20resource=20enabled=20swit?=
 =?UTF-8?q?ch=20optimistic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProxyResourcesTable.tsx | 63 ++++++++++++++++++++------
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx
index a22d96b6..ba69dec4 100644
--- a/src/components/ProxyResourcesTable.tsx
+++ b/src/components/ProxyResourcesTable.tsx
@@ -32,7 +32,13 @@ import {
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState, useTransition } from "react";
+import {
+    useOptimistic,
+    useRef,
+    useState,
+    useTransition,
+    type ComponentRef
+} from "react";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
@@ -479,18 +485,9 @@ export default function ProxyResourcesTable({
                 />
             ),
             cell: ({ row }) => (
-                <Switch
-                    checked={
-                        row.original.http
-                            ? !!row.original.domainId && row.original.enabled
-                            : row.original.enabled
-                    }
-                    disabled={row.original.http && !row.original.domainId}
-                    onCheckedChange={(val) =>
-                        startTransition(() =>
-                            toggleResourceEnabled(val, row.original.id)
-                        )
-                    }
+                <ResourceEnabledForm
+                    resource={row.original}
+                    onToggleResourceEnabled={toggleResourceEnabled}
                 />
             )
         },
@@ -632,3 +629,43 @@ export default function ProxyResourcesTable({
         </>
     );
 }
+
+type ResourceEnabledFormProps = {
+    resource: ResourceRow;
+    onToggleResourceEnabled: (
+        val: boolean,
+        resourceId: number
+    ) => Promise<void>;
+};
+
+function ResourceEnabledForm({
+    resource,
+    onToggleResourceEnabled
+}: ResourceEnabledFormProps) {
+    const enabled = resource.http
+        ? !!resource.domainId && resource.enabled
+        : resource.enabled;
+    const [optimisticEnabled, setOptimisticEnabled] = useOptimistic(enabled);
+
+    const formRef = useRef<ComponentRef<"form">>(null);
+
+    async function submitAction(formData: FormData) {
+        const newEnabled = !(formData.get("enabled") === "on");
+        setOptimisticEnabled(newEnabled);
+        await onToggleResourceEnabled(newEnabled, resource.id);
+    }
+
+    return (
+        <form action={submitAction} ref={formRef}>
+            <Switch
+                checked={optimisticEnabled}
+                disabled={
+                    (resource.http && !resource.domainId) ||
+                    optimisticEnabled !== enabled
+                }
+                name="enabled"
+                onCheckedChange={() => formRef.current?.requestSubmit()}
+            />
+        </form>
+    );
+}