svelte-infinite 0.1.2 → 0.1.4

package/README.md

@@ -92,9 +92,11 @@ See the example below and [in this repository](https://github.com/ndom91/svelte-
       // Ideally, like most paginated endpoints, this should return the data
       // you've requested for your page, as well as the total amount of data
       // available to page through
-
       if (!dataResponse.ok) {
         stateChanger.error()
+
+        // On errors, set the pageNumber back so we can retry
+        // that page's data on the next 'loadMore' attempt
         pageNumber -= 1
         return
       }
@@ -163,8 +165,8 @@ The `stateChanger` import is an object with 4 methods on it:
 
 - `triggerLoad: () => Promise<void>` - **required**
   - The async function to call when we should attempt to load more data to show.
-- `intersectionOptions` - optional
-- The options to pass to the `IntersectionObserver` instance. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) for more details. Default is `{ rootMargin: "0px 0px 200px 0px" }`, making it trigger the `loadMore` function 200px before it actually intersects with the root element (window by default). This has the effect of beginning to load the next page of data before the user has actually reached the bottom of the list, making the experience feel more smooth.
+- `intersectionOptions: `[`IntersectionObserverInit`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)` = { rootMargin: "0px 0px 200px 0px" }` - optional
+  - The options to pass to the `IntersectionObserver` instance. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) for more details. The default `rootMargin` value will cause the target to intersect 200px earlier and trigger the `loadMore` function before it actually intersects with the root element (window by default). This has the effect of beginning to load the next page of data before the user has actually reached the current bottom of the list, making the experience feel more smooth.
   - It may also be required to pass in a reference to your scroll container as the `root` option, if your scroll container is not the window.
 - `loopTimeout: number = 1000` - optional
   - If the `loopMaxCalls` is reached within this duration (in milliseconds), a cool down period is triggered.

package/dist/InfiniteLoader.svelte

@@ -25,7 +25,7 @@ export const stateChanger = {
 };
 </script>
 
-<script>import { onDestroy } from "svelte";
+<script>import { onMount, onDestroy } from "svelte";
 const {
   triggerLoad,
   loopTimeout = 1e3,
@@ -72,7 +72,7 @@ async function attemptLoad() {
     }
   }
 }
-$effect(() => {
+onMount(() => {
   if (observer || !intersectionTarget)
     return;
   const appliedIntersectionOptions = {
@@ -130,22 +130,17 @@ onDestroy(() => {
 
 <style>
   .infinite-loader-wrapper {
-    display: grid;
     width: 100%;
-    place-items: center;
 
     .infinite-loading {
-      margin-top: 1rem;
       font-size: 1.5rem;
     }
 
     .infinite-no-results {
-      margin-top: 1rem;
       font-size: 1.5rem;
     }
 
     .infinite-no-data {
-      margin-top: 1rem;
       font-size: 1.5rem;
     }
 
@@ -180,6 +175,7 @@ onDestroy(() => {
       width: 100%;
       min-height: 1px;
       display: flex;
+      margin-block: 2rem;
       flex-direction: column;
       align-items: center;
       justify-content: center;

package/package.json

@@ -6,7 +6,7 @@
     "email": "yo@ndo.dev",
     "url": "https://ndo.dev"
   },
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "homepage": "https://svelte-5-infinite.vercel.app",
   "keywords": [