fix breadcrumb promised

comps/custom/Breadcrumb.tsx

@@ -18,6 +18,29 @@ type BreadcrumbProps = {
 };
 
 export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
+  const local = useLocal({ value: value, loading: false, loaded: false });
+
+  useEffect(() => {
+    if (local.loaded) {
+      local.loaded = false;
+      local.render();
+    }
+  }, [location.pathname, location.hash]);
+
+  if (value instanceof Promise) {
+    if (!local.loaded) {
+      local.loading = true;
+      value.then((v) => {
+        local.value = v;
+        local.loading = false;
+        local.loaded = true;
+        local.render();
+      });
+    }
+  } else {
+    local.value = value;
+  }
+
   return (
     <div
       className={cx(
@@ -25,49 +48,57 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
         className
       )}
     >
-      {(value || []).map((cur, index): ReactNode => {
+      {local.loading ? (
-        const lastIndex = (value || []).length - 1;
+        <FieldLoading />
+      ) : (
+        <>
+          {(Array.isArray(local.value) ? local.value : []).map(
+            (cur, index): ReactNode => {
+              const lastIndex = (local.value || []).length - 1;
 
-        return (
+              return (
-          <>
+                <>
-            {index === lastIndex ? (
+                  {index === lastIndex ? (
-              <h1 className="c-font-semibold c-text-xs md:c-text-base">
+                    <h1 className="c-font-semibold c-text-xs md:c-text-base">
-                {cur?.label}
+                      {cur?.label}
-              </h1>
+                    </h1>
-            ) : (
+                  ) : (
-              <h1
+                    <h1
-                className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
+                      className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
-                onClick={(ev) => {
+                      onClick={(ev) => {
-                  if (isEditor) return;
+                        if (isEditor) return;
-                  if (cur.url) navigate(cur.url || "");
+                        if (cur.url) navigate(cur.url || "");
-                  if (cur.onClick) cur.onClick(ev);
+                        if (cur.onClick) cur.onClick(ev);
-                }}
+                      }}
-              >
+                    >
-                {cur?.label}
+                      {cur?.label}
-              </h1>
+                    </h1>
-            )}
+                  )}
 
-            {index !== lastIndex && (
+                  {index !== lastIndex && (
-              <div>
+                    <div>
-                <svg
+                      <svg
-                  xmlns="http://www.w3.org/2000/svg"
+                        xmlns="http://www.w3.org/2000/svg"
-                  width="24"
+                        width="24"
-                  height="24"
+                        height="24"
-                  viewBox="0 0 24 24"
+                        viewBox="0 0 24 24"
-                  fill="none"
+                        fill="none"
-                  stroke="currentColor"
+                        stroke="currentColor"
-                  strokeWidth="1"
+                        strokeWidth="1"
-                  strokeLinecap="round"
+                        strokeLinecap="round"
-                  strokeLinejoin="round"
+                        strokeLinejoin="round"
-                  className="lucide lucide-chevron-right"
+                        className="lucide lucide-chevron-right"
-                >
+                      >
-                  <path d="m9 18 6-6-6-6" />
+                        <path d="m9 18 6-6-6-6" />
-                </svg>
+                      </svg>
-              </div>
+                    </div>
-            )}
+                  )}
-          </>
+                </>
-        );
+              );
-      })}
+            }
+          )}
+        </>
+      )}
     </div>
   );
 };

preset/menu/Layout.tsx

@@ -1,6 +1,7 @@
 import { getPathname } from "lib/utils/pathname";
 import { FC, ReactNode, useEffect, useLayoutEffect, useState } from "react";
 import { loadSession } from "../login/utils/load";
+import { useLocal } from "lib/utils/use-local";
 
 const w = window as any;
 const fn = function () {
@@ -39,8 +40,8 @@ type LYTChild = {
 };
 
 export const Layout: FC<LYTChild> = (props) => {
-  const [_, set] = useState({});
+  const local = useLocal({loading: true})
-  const render = () => set({});
+  const render = local.render;
   useLayoutEffect(() => {
     if (!isEditor) {
       window.addEventListener("resize", render);
@@ -64,10 +65,7 @@ export const Layout: FC<LYTChild> = (props) => {
   const path = getPathname();
   const no_layout = props.exception;
 
-  useEffect(() => {
+  if (!w.user) loadSession(props.login_url || "/auth/login");
-    loadSession(props.login_url || "/auth/login");
-    render();
-  }, []);
 
   if (!isEditor && Array.isArray(no_layout)) {
     if (no_layout.length) {