Rollback deferred to old version

Signed-off-by: Marcos Candeia <[email protected]>

deno.json

@@ -9,7 +9,7 @@
     "std/": "https://deno.land/[email protected]/",
     "partytown/": "https://deno.land/x/[email protected]/",
     "deco-sites/std/": "https://denopkg.com/deco-sites/[email protected]/",
-    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@30aa5339af59f53d5452b29eebde196a1df66a16/"
+    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.80.0/"
   },
   "lock": false,
   "tasks": {

htmx/sections/Deferred.tsx

@@ -1,17 +1,16 @@
 import type { Section } from "deco/blocks/section.ts";
 import { useSection } from "deco/hooks/useSection.ts";
 import { asResolved, isDeferred } from "deco/mod.ts";
+import { renderSection, shouldForceRender } from "../../utils/deferred.tsx";
 import { AppContext } from "../mod.ts";
-import { shouldForceRender } from "../../utils/deferred.ts";
 
 /**
  * @titleBy type
  * @description fires once when the element is first loaded
  */
 interface Load {
   type: "load";
-
-  // TODO: @gimenes add delay
+  /** @hide true */
   delay?: number;
 }
 
@@ -35,18 +34,19 @@ interface Intersect {
 
 export interface Props {
   sections: Section[];
-  fallback?: Section;
+  /** @hide true */
+  fallbacks?: Section[];
   trigger?: Load | Revealed | Intersect;
   loading?: "lazy" | "eager";
 }
 
 const Deferred = (props: Props) => {
-  const { sections, loading, trigger, fallback } = props;
+  const { sections, loading, trigger } = props;
 
   if (loading === "eager") {
     return (
       <>
-        {sections.map(({ Component, props }) => <Component {...props} />)}
+        {sections.map(renderSection)}
       </>
     );
   }
@@ -61,15 +61,16 @@ const Deferred = (props: Props) => {
   }
 
   return (
-    <div
-      hx-get={href}
-      hx-trigger={`${trigger?.type ?? "load"} once`}
-      hx-target="closest section"
-      hx-swap="outerHTML"
-      style={{ height: "100vh" }}
-    >
-      {fallback && <fallback.Component {...fallback.props} />}
-    </div>
+    <>
+      <div
+        hx-get={href}
+        hx-trigger={triggerList.join(" ")}
+        hx-target="closest section"
+        hx-swap="outerHTML"
+        style={{ height: "100vh" }}
+      />
+      {props.fallbacks?.map(renderSection)}
+    </>
   );
 };