Design
llms.txt digitalcrew.tech

Feedback

Skeleton

A placeholder block that pulses (t-skel-pulse, 1s) in accent while content loads.

MaxFeedbackDigitalCrew.Skeleton
Skeleton · liveOpen

Guidelines#

Use it for every load longer than a blink — Max has about 400 of them, and route-level loading.tsx screens should reuse them. Shape skeletons like the content (avatar circle, two text lines, KPI tiles via KpiCardSkeleton) so nothing jumps when it arrives.

What you provide: size and shape through className (h-4 w-56, size-11 rounded-full). Keep loading, empty, no-access and failed states distinct: never show "nothing here" while access is still being checked.

Facts#

GroupFeedback
ProductMax
Globalwindow.DigitalCrew.Skeleton
Sourcemax-agent: src/components/ui/skeleton.tsx
Import in the appimport { Skeleton } from "@/components/ui/skeleton";

API#

TypeScript declarations emitted from src/components/ui/skeleton.tsx (the module also exports its other parts).

declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
export { Skeleton };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid gap-6 max-w-xl" },
    h("div", { className: "flex items-center gap-4" },
      h(DC.Skeleton, { className: "size-11 rounded-full" }),
      h("div", { className: "grid gap-2" }, h(DC.Skeleton, { className: "h-4 w-56" }), h(DC.Skeleton, { className: "h-4 w-40" }))),
    h("div", { className: "grid grid-cols-3 gap-3" },
      h(DC.KpiCardSkeleton, null), h(DC.KpiCardSkeleton, null), h(DC.KpiCardSkeleton, null)));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
AlertAnimatedCircularProgressBarHelpTooltipProgressToaster