x-intersect

index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width" />
     <title>Diffusers gallery</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
     <script>
       function getModels(page) {
@@ -21,16 +22,7 @@
       function findImage(text) {
         const imageRegex = /(https?:\/\/.*\.(?:png|jpg))(\?.*)?/i;
         const match = text.match(imageRegex);
-        return match ? match[1] : null;
-      }
-
-      function onIntersection(targetEl, callback) {
-        const observer = new IntersectionObserver(([entry]) => {
-          if (entry.isIntersecting) {
-            callback();
-          }
-        });
-        observer.observe(targetEl);
+        return match ? match[0] : null;
       }
     </script>
   </head>
@@ -39,18 +31,15 @@
     <section
       class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto"
       x-data="{models: [], page: 0}"
-      x-init="models = await getModels();
-              onIntersection($refs.scrollSentinel, async () => {
-                models = [...models, ...await getModels(page+1)]
-                page++;
-              })"
+      x-init="models = await getModels()"
+      x-effect="console.log(models)"
     >
       <template x-for="model in models" :key="model.id">
         <a
           x-data="{img: null}"
           x-init="img = await getModelCard(model.id).then(findImage)"
           :href="`https://huggingface.co/${model.id}`"
-          class="block bg-gray-100 rounded-xl overflow-hidden relative group aspect-square"
+          class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square"
           target="_blank"
         >
           <div
@@ -86,7 +75,7 @@
           </div>
         </a>
       </template>
-      <div class="h-12" x-ref="scrollSentinel"></div>
+      <div class="h-12" x-intersect="models = [...models, ...await getModels(page+1)]; page++"></div>
     </section>
   </body>
 </html>