Preloading

Load important resources early.

html

<div class="lod-pre-stage" data-resource="hero-image">
  <div class="lod-pre-row"><span>Document</span><span class="lod-pre-bar" style="width:20%;"></span></div>
  <div class="lod-pre-row lod-pre-row--main"><span class="lod-pre-name"></span><span class="lod-pre-bar lod-pre-bar--priority" style="width:85%; background:#E8A020;"></span></div>
  <div class="lod-pre-row"><span>Rest of page</span><span class="lod-pre-bar" style="width:10%;"></span></div>
  <p class="lod-pre-caption">Requested early, ahead of the elements that need it</p>
</div>
<style>
.lod-pre-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.lod-pre-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lod-pre-row span:first-child { width: 90px; flex: none; }
.lod-pre-bar { display: block; height: 8px; background: #24143022; border-radius: 999px; }
.lod-pre-name::before { content: "hero-image.jpg"; }
[data-resource="font"] .lod-pre-name::before { content: "display-font.woff2"; }
[data-resource="script"] .lod-pre-name::before { content: "app-bundle.js"; }
.lod-pre-caption { margin: 6px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-resource="hero-image">
  <div class="flex items-center gap-2 mb-2"><span class="w-[90px] flex-none">Document</span><span class="block h-2 bg-[#24143022] rounded-full" style="width:20%;"></span></div>
  <div class="flex items-center gap-2 mb-2"><span class="tw-pre-name w-[90px] flex-none"></span><span class="block h-2 rounded-full" style="width:85%; background:#E8A020;"></span></div>
  <div class="flex items-center gap-2 mb-2"><span class="w-[90px] flex-none">Rest of page</span><span class="block h-2 bg-[#24143022] rounded-full" style="width:10%;"></span></div>
  <p class="mt-1.5">Requested early, ahead of the elements that need it</p>
</div>
<style>
.tw-pre-name::before { content: "hero-image.jpg"; }
[data-resource="font"] .tw-pre-name::before { content: "display-font.woff2"; }
[data-resource="script"] .tw-pre-name::before { content: "app-bundle.js"; }
</style>

react

export function Preloading({
  resourceType = "hero-image",
  earlyHint = true,
  accent = "#E8A020",
}) {
  const names = { "hero-image": "hero-image.jpg", font: "display-font.woff2", script: "app-bundle.js" };
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 90, flex: "none" }}>Document</span><span style={{ display: "block", height: 8, width: "20%", background: "#24143022", borderRadius: 999 }} /></div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 90, flex: "none" }}>{names[resourceType]}</span><span style={{ display: "block", height: 8, width: earlyHint ? "85%" : "35%", background: accent, borderRadius: 999 }} /></div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 90, flex: "none" }}>Rest of page</span><span style={{ display: "block", height: 8, width: "10%", background: "#24143022", borderRadius: 999 }} /></div>
      <p style={{ margin: "6px 0 0" }}>{earlyHint ? "Requested early, ahead of the elements that need it" : "Requested at normal priority, later in the queue"}</p>
    </div>
  );
}