fix breadcrumb promised

This commit is contained in:
Rizky 2024-07-11 19:16:54 -07:00
parent cb3299d1ef
commit 99738105a2
2 changed files with 76 additions and 47 deletions

View File

@ -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,8 +48,13 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
className
)}
>
{(value || []).map((cur, index): ReactNode => {
const lastIndex = (value || []).length - 1;
{local.loading ? (
<FieldLoading />
) : (
<>
{(Array.isArray(local.value) ? local.value : []).map(
(cur, index): ReactNode => {
const lastIndex = (local.value || []).length - 1;
return (
<>
@ -67,7 +95,10 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
)}
</>
);
})}
}
)}
</>
)}
</div>
);
};

View File

@ -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 render = () => set({});
const local = useLocal({loading: true})
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(() => {
loadSession(props.login_url || "/auth/login");
render();
}, []);
if (!w.user) loadSession(props.login_url || "/auth/login");
if (!isEditor && Array.isArray(no_layout)) {
if (no_layout.length) {