fixing table list loading link params

comps/list/TableList.tsx

@@ -36,6 +36,7 @@ import { MDLocal } from "../md/utils/typings";
 import { Skeleton } from "../ui/skeleton";
 import { toast } from "../ui/toast";
 import { sortTree } from "./utils/sort-tree";
+import { getPathname } from "lib/exports";
 
 type OnRowClick = (arg: {
   row: any;
@@ -129,7 +130,9 @@ export const TableList: FC<TableListProp> = ({
   if (ls_sort) {
     ls_sort = JSON.parse(ls_sort as any);
   }
-  const local = useLocal({
+  const local = useLocal(
+    {
+      times: 0,
       selectedRows: [] as {
         pk: string | number;
         rows: any;
@@ -175,8 +178,11 @@ export const TableList: FC<TableListProp> = ({
       collapsed: new Set<number>(),
       cached_row: new WeakMap<any, ReactElement>(),
       filtering: "" as ReactNode | string | true,
+      reloading: null as any,
       reload: (arg?: { toast: boolean }) => {
-      return new Promise<void>((done) => {
+        if (local.reloading) return local.reloading;
+
+        local.reloading = new Promise<void>(async (done) => {
           let should_toast = true;
           if (arg?.toast === false) should_toast = false;
           local.should_toast = should_toast;
@@ -210,6 +216,16 @@ export const TableList: FC<TableListProp> = ({
             }
 
             if (md) {
+              if (md.header.loading) {
+                await new Promise<void>((resolve) => {
+                  const ival = setInterval(() => {
+                    if (!md.header.loading) {
+                      clearInterval(ival);
+                      resolve();
+                    }
+                  }, 10);
+                });
+              }
               const last = md.params.links[md.params.links.length - 1];
 
               if (last && last.where) {
@@ -221,7 +237,10 @@ export const TableList: FC<TableListProp> = ({
               }
             }
 
-          call_prasi_events("tablelist", "where", [__props?.gen__table, where]);
+            call_prasi_events("tablelist", "where", [
+              __props?.gen__table,
+              where,
+            ]);
 
             const load_args: any = {
               async reload() {},
@@ -244,10 +263,12 @@ export const TableList: FC<TableListProp> = ({
               }
 
               local.status = "ready";
+              local.reloading = null;
               local.render();
               done();
 
-            if (local.grid_ref && !id_parent) local.paging.scroll(local.grid_ref);
+              if (local.grid_ref && !id_parent)
+                local.paging.scroll(local.grid_ref);
             };
 
             if (result instanceof Promise) {
@@ -276,6 +297,8 @@ export const TableList: FC<TableListProp> = ({
             } else callback(result);
           }
         });
+
+        return local.reloading;
       },
       sort: {
         columns: (ls_sort?.columns || []) as SortColumn[],
@@ -354,10 +377,15 @@ export const TableList: FC<TableListProp> = ({
       soft_delete: {
         field: null as any,
       },
-  });
+    },
+    ({ setDelayedRender }) => {
+      setDelayedRender(true);
+    }
+  );
 
   const reload = local.reload;
   if (md) {
+    md.master.list = local;
     md.master.reload = reload;
   }
 
@@ -712,9 +740,12 @@ export const TableList: FC<TableListProp> = ({
 
   if (!isEditor) {
     let should_toast = true;
-    if (md && md.props.mode !== "full") {
+    if (md) {
+      if (md.props.mode !== "full") {
         should_toast = false;
       }
+    }
+
     if (should_toast) {
       if (local.status === "loading") {
         toast.dismiss();
@@ -730,12 +761,6 @@ export const TableList: FC<TableListProp> = ({
     }
   }
 
-  if (local.status === "resizing" && !isEditor) {
-    local.status = "ready";
-    local.render();
-    return null;
-  }
-
   if (document.getElementsByClassName("prasi-toaster").length === 0) {
     const elemDiv = document.createElement("div");
     elemDiv.className = "prasi-toaster";
@@ -744,6 +769,11 @@ export const TableList: FC<TableListProp> = ({
   const toaster_el = document.getElementsByClassName("prasi-toaster")[0];
 
   if (mode === "table") {
+    if (local.status === "resizing" && !isEditor) {
+      local.status = "ready";
+      local.render();
+    }
+
     return (
       <div
         className={cx(
@@ -929,7 +959,26 @@ export const TableList: FC<TableListProp> = ({
             <Skeleton className={cx("c-w-[180px] c-h-[11px]")} />
           </div>
         ) : (
-          <div className="c-absolute c-inset-0">
+          <div
+            className={cx(
+              "c-absolute c-inset-0",
+              css`
+                @keyframes flasher {
+                  from {
+                    opacity: 0;
+                    transform: translateY(-10px);
+                  }
+                  to {
+                    opacity: 1;
+                    transform: translateY(0px);
+                  }
+                }
+                .list-row {
+                  animation: flasher 0.5s;
+                }
+              `
+            )}
+          >
             <>
               {Array.isArray(data) && data.length > 0 ? (
                 <div
@@ -942,7 +991,7 @@ export const TableList: FC<TableListProp> = ({
                   {data.map((e, idx) => {
                     return (
                       <div
-                        className="c-flex-grow c-flex"
+                        className={cx("list-row c-flex-grow c-flex")}
                         onClick={(ev) => {
                           if (!isEditor && typeof row_click === "function") {
                             row_click({
@@ -1047,9 +1096,14 @@ const genRows = (total: number) => {
 };
 
 const dataGridStyle = (local: { height: number }) => css`
+  ${local.height
+    ? css`
         .rdg {
           block-size: ${local.height}px;
         }
+      `
+    : ``}
+
   div[role="row"]:hover {
     background: #e2f1ff;
     .num-edit {

comps/md/utils/typings.ts

@@ -58,6 +58,7 @@ export type MDLocalInternal = {
   master: {
     reload: (arg?: { toast: boolean }) => void;
     render: () => void;
+    list?: any;
     pk?: string;
   };
   params: {

utils/use-local.ts

@@ -4,6 +4,7 @@ export const useLocal = <T extends object>(
   data: T,
   effect?: (arg: {
     init: boolean;
+    setDelayedRender: (arg: boolean) => void;
   }) => Promise<void | (() => void)> | void | (() => void),
   deps?: any[]
 ): {
@@ -19,12 +20,20 @@ export const useLocal = <T extends object>(
     _loading: {} as any,
     lastRender: 0,
     lastRenderCount: 0,
+    delayedRender: false,
+    delayedRenderTimeout: null as any,
   });
   const local = _.current;
 
   useEffect(() => {
     local.ready = true;
-    if (effect) effect({ init: true });
+    if (effect)
+      effect({
+        init: true,
+        setDelayedRender(arg) {
+          local.delayedRender = arg;
+        },
+      });
   }, []);
 
   if (local.ready === false) {
@@ -32,6 +41,17 @@ export const useLocal = <T extends object>(
 
     local.data.render = () => {
       if (local.ready) {
+        if (local.delayedRender) {
+          if (Date.now() - local.lastRender > 100) {
+            local.lastRender = Date.now();
+            _render({});
+          } else {
+            clearTimeout(local.delayedRenderTimeout);
+            local.delayedRenderTimeout = setTimeout(local.data.render, 50);
+          }
+          return;
+        }
+
         if (Date.now() - local.lastRender < 300) {
           local.lastRenderCount++;
         } else {
@@ -39,7 +59,9 @@ export const useLocal = <T extends object>(
         }
 
         if (local.lastRenderCount > 300) {
-          throw new Error("local.render more than 300 times in less than 300ms");
+          throw new Error(
+            "local.render more than 300 times in less than 300ms"
+          );
         }
 
         local.lastRender = Date.now();
@@ -54,7 +76,12 @@ export const useLocal = <T extends object>(
 
           if (effect) {
             setTimeout(() => {
-              effect({ init: false });
+              effect({
+                init: false,
+                setDelayedRender(arg) {
+                  local.delayedRender = arg;
+                },
+              });
             });
           }
           break;