1 files changed, 51 insertions, 11 deletions
diff --git a/packages/bun-framework-next/fallback.development.tsx b/packages/bun-framework-next/fallback.development.tsx
index 34e6cb349..b42835d36 100644
--- a/packages/bun-framework-next/fallback.development.tsx
+++ b/packages/bun-framework-next/fallback.development.tsx
@@ -1,43 +1,83 @@
 import { insertStyleSheet } from "./page-loader";
+import type {
+  FallbackMessageContainer,
+  FallbackStep,
+} from "../../../src/api/schema";
 
-const globalCSSQueue = [];
-function insertGlobalStyleSheet({ detail }) {
-  globalCSSQueue.push(insertStyleSheet(detail));
+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";
 
-export default function render({ router, reason, problems }) {
+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.head.insertAdjacentHTML(
-      "beforeend",
-      `<meta name="next-head-count" content="2">`
-    );
   }
 
   document.removeEventListener("onimportcss", insertGlobalStyleSheet);
   document.addEventListener("onimportcss", pageLoader.onImportCSS, {
     passive: true,
   });
-  import(route)
+
+  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;
+      const cssQueue = pageLoader.cssQueue.slice();
       pageLoader.cssQueue = [];
-      return Promise.all([...cssQueue, ...globalCSSQueue]);
+      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) => {
+      console.error(err);
+      Promise.all(pageLoader.cssQueue).finally(() => {
+        renderFallbackError(props);
+      });
+    }
+  );
+}