Skip to content

Commit

Permalink
fix breadcrumb suspense
Browse files Browse the repository at this point in the history
  • Loading branch information
Brendonovich committed May 23, 2024
1 parent f2510cf commit 01d5786
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 30 deletions.
42 changes: 14 additions & 28 deletions apps/web/src/app/(dash)/@topbar/@breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,22 @@
import {
For,
type ParentProps,
Suspense,
SuspenseList,
children,
} from "solid-js";

import IconMdiSlashForward from "~icons/mdi/slash-forward";
import { Show, For, type ParentProps, SuspenseList, children } from "solid-js";

export default function (props: ParentProps) {
const breadcrumbs = children(() => props.children);

return (
<div class="flex flex-row items-center text-sm font-medium space-x-2 text-gray-800">
<SuspenseList revealOrder="forwards" tail="collapsed">
<For each={breadcrumbs.toArray()}>
{(element: any) => (
<div class="flex flex-row items-center gap-2">
<Suspense
fallback={
<>
<IconMdiSlashForward class="text-lg text-gray-300" />
<div class="w-24 h-4 rounded-full bg-neutral-200 animate-pulse" />
</>
}
>
<IconMdiSlashForward class="text-lg text-gray-300" />
{element?.breadcrumb}
</Suspense>
</div>
)}
</For>
<Show when>
{(_) => {
// children() has a createMemo that will invoke suspense before rendering
// so we need to put it here
const breadcrumbs = children(() => props.children);

return (
<For each={breadcrumbs.toArray()}>
{(element: any) => <>{element?.breadcrumb}</>}
</For>
);
}}
</Show>
</SuspenseList>
</div>
);
Expand Down
21 changes: 19 additions & 2 deletions apps/web/src/app/(dash)/@topbar/@breadcrumbs/Breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import type { JSX, ParentProps } from "solid-js";
import { Suspense, type JSX, type ParentProps } from "solid-js";

// we use a dedicated object since otherwise all the fragments would merge
export function Breadcrumb(props: ParentProps) {
return { breadcrumb: <>{props.children}</> } as unknown as JSX.Element;
return {
breadcrumb: (
<div class="flex flex-row items-center gap-2">
<Suspense
fallback={
<>
<IconMdiSlashForward class="text-lg text-gray-300" />
<div class="w-24 h-4 rounded-full bg-neutral-200 animate-pulse" />
</>
}
>
<IconMdiSlashForward class="text-lg text-gray-300" />

{props.children}
</Suspense>
</div>
),
} as unknown as JSX.Element;
}

0 comments on commit 01d5786

Please sign in to comment.