1 files changed, 82 insertions, 0 deletions
diff --git a/examples/hello-next/bun-framework-next/fallback.development.tsx b/examples/hello-next/bun-framework-next/fallback.development.tsx
new file mode 100644
index 000000000..1cd5f847e
--- /dev/null
+++ b/examples/hello-next/bun-framework-next/fallback.development.tsx
@@ -0,0 +1,82 @@
+import { insertStyleSheet } from "./page-loader";
+import type {
+  FallbackMessageContainer,
+  FallbackStep,
+} from "../../../src/api/schema";
+
+var once = false;
+function insertGlobalStyleSheet(detail) {
+  if (!once) {
+    document.head.insertAdjacentHTML(
+      "beforeend",
+      `<meta name="next-head-count" content="${document.head.childElementCount}">`
+    );
+    once = true;
+  }
+  pageLoader.cssQueue.push(insertStyleSheet(detail).then(() => {}));
+}
+
+[...globalThis["__BUN"].allImportedStyles].map((detail) =>
+  insertGlobalStyleSheet(detail)
+);
+
+document.addEventListener("onimportcss", insertGlobalStyleSheet, {
+  passive: true,
+});
+
+import { renderError, _boot, pageLoader } from "./client.development";
+import { renderFallbackError } from "bun-error";
+
+function renderFallback({
+  router,
+  reason,
+  problems,
+}: FallbackMessageContainer) {
+  const route = router.routes[router.route];
+
+  if (!document.getElementById("__next")) {
+    const next = document.createElement("div");
+    next.id = "__next";
+    document.body.prepend(next);
+  }
+
+  document.removeEventListener("onimportcss", insertGlobalStyleSheet);
+  document.addEventListener("onimportcss", pageLoader.onImportCSS, {
+    passive: true,
+  });
+
+  globalThis.__NEXT_DATA__.pages["/_app"] = [
+    ...globalThis.__NEXT_DATA__.pages["/_app"],
+    ...globalThis["__BUN"].allImportedStyles,
+  ];
+
+  return import(route)
+    .then((Namespace) => {
+      return _boot(Namespace, true);
+    })
+    .then(() => {
+      const cssQueue = pageLoader.cssQueue.slice();
+      pageLoader.cssQueue = [];
+      return Promise.all([...cssQueue]);
+    })
+    .finally(() => {
+      document.body.style.visibility = "visible";
+      document.removeEventListener("onimportcss", pageLoader.onImportCSS);
+    });
+}
+
+export default function render(props: FallbackMessageContainer) {
+  renderFallback(props).then(
+    () => {
+      Promise.all(pageLoader.cssQueue).finally(() => {
+        renderFallbackError(props);
+        document.body.style.visibility = "visible";
+      });
+    },
+    (err) => {
+      Promise.all(pageLoader.cssQueue).finally(() => {
+        renderFallbackError(props);
+      });
+    }
+  );
+}