fix(explorer): update only changed table values (#3733)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

Author: karooolis

.changeset/twenty-mangos-stare.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Table cell edits are now saved only when the value has changed.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx

@@ -17,7 +17,6 @@ import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.j
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Checkbox } from "../../../../../../components/ui/Checkbox";
-import { cn } from "../../../../../../utils";
 import { useChain } from "../../../../hooks/useChain";
 
 type Props = {
@@ -105,11 +104,7 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
   }
 
   return (
-    <div
-      className={cn("w-full", {
-        "flex cursor-wait items-center gap-1": isPending,
-      })}
-    >
+    <div className="w-full">
       {!isPending && (
         <form
           onSubmit={(evt) => {
@@ -118,20 +113,25 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
           }}
         >
           <input
-            className="w-full bg-transparent"
+            className="w-full bg-transparent px-2 py-4"
             onChange={(evt: ChangeEvent<HTMLInputElement>) => setValue(evt.target.value)}
-            onBlur={(evt) => handleSubmit(evt.target.value)}
+            onBlur={(evt) => {
+              const newValue = evt.target.value;
+              if (newValue !== String(defaultValue)) {
+                handleSubmit(newValue);
+              }
+            }}
             value={String(value)}
             disabled={isPending}
           />
         </form>
       )}
 
       {isPending && (
-        <>
+        <div className="flex items-center gap-1 px-2">
           {String(value)}
           <LoaderIcon className="h-4 w-4 animate-spin" />
-        </>
+        </div>
       )}
     </div>
   );

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -189,7 +189,7 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
                       return (
-                        <TableHead key={header.id}>
+                        <TableHead key={header.id} className="px-4">
                           {header.isPlaceholder
                             ? null
                             : flexRender(header.column.columnDef.header, header.getContext())}
@@ -211,7 +211,9 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
                   <TableRow key={row.id}>
                     {row.getVisibleCells().map((cell) => {
                       return (
-                        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                        <TableCell key={cell.id} className="px-2 py-0">
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
                       );
                     })}
                   </TableRow>