jonasgeiler/svelte-infinite-loading

An infinite scroll component for Svelte, to help you implement an infinite scroll list more easily.

svelte-infinite-loading

An infinite scroll component for Svelte apps

About • Features • Installation • Documentation • Examples • License

About

An infinite scroll component for Svelte, to help you implement an infinite scroll list more easily.
This is heavily inspired by vue-infinite-loading and uses most of its code and functionality!

Features

• Mobile friendly
• Built-in spinners
• 2-directional support
• Load result message display

Installation

If you're using this component in a Sapper application, make sure to install the package to devDependencies!
More Details

With npm:

$ npm install svelte-infinite-loading

With yarn:

$ yarn add svelte-infinite-loading

With pnpm (recommended):

$ npm i -g pnpm
$ pnpm install svelte-infinite-loading

From CDN (via unpkg):

<!-- UMD -->
<script src="https://unpkg.com/svelte-infinite-loading@^1/dist/svelte-infinite-loading.js"></script>

<!-- ES Module -->
<script src="https://unpkg.com/svelte-infinite-loading@^1/dist/svelte-infinite-loading.mjs"></script>

Examples / Demo

• Hacker News
• Hacker News with Filter
• Hacker News with Top Direction
• Hacker News using svelte-tiny-virtual-list

For more information on how to use this library, check the documentation!

Documentation

You can find the documentation in the repository wiki

License

MIT License

svelte-infinite-loading's Issues

[Help] How to use "identifier" ?

Grüß Gott,

i tried to reset the list on click of as button.
So i can change the filter on the backend providing the list and restart with a fresh list. ;)

i assumed something like this should do it:

<script>
  let infiniteId = 1;

  function handleButton() {
    console.debug('Klick', infiniteId);
    infiniteId += 1;
  }
</script>

bla bla...

        <InfiniteLoading on:infinite={infiniteHandler} identifier={infiniteId} >
          <div slot="noMore">All data loaded</div>
        </InfiniteLoading>

blub ...

but nothing happens here...?

What am i missing?

Help request: how to do infinite tables

I have been trying to rework the hacker news example code to use tables, and am failing to get it to work. Is there any example I can look at, or is infinite scroll not suited to tables? Thanks,

Enhancement request Horizontal Infinite loading.

Currently infinite loading works with vertical lists it would be great if horizontal lists could also be supported.

Thanks

window.remove vs window.removeEventListener in third argument detection.

https://github.com/Skayo/svelte-infinite-loading/blob/86b3f25adcf4c3c27ab06483b9ae5b1eea1668ed/src/InfiniteLoading.svelte#L39-L40

I looked at the referenced EventListenerOptions doc and suspect window.remove should be window.removeEventListener here?

Masonry - Is there a hook or callback I can use to re-fire masonry when new elements loaded?

Hi Skayo, thanks for this library! :)
I'm trying svelte-infinite-loading and tiny-virtual-list out, on a grid of Bootstrap column elements (flex columns, not CSS Grid, because i need to support more browsers).

I'd like to apply masonryjs to the elements and re-fire it when new elements are loaded. It seems like virtual list might provide an event to listen to, but I don't find it.

Or should I fire it on my own fetchMore for next page of data? It seems like there might be timing issues with that.

doc: Improve documentation for the `infiniteHandler`

This library is fantastic. Thank you for building this.

I thought I would write a suggestion to make it explicit the infiniteHandler working. I ran into an issue where I awaited for a promise inside the infiniteHandler and the scroll bar went into a scroll loop. It took hours of debugging to understand that we should not be awaiting inside the infiniteHandler and must return immediately. Hope will save some time for a future developer.

<script>
function infiniteHandler({ detail: { loaded, complete } }) {
    // ---------------------------------------------------
    // --  NOTE:  There is no `await` for this promise  --
    // ---------------------------------------------------
    fetch(`${api}&page=${page}`)
      .then(response => response.json())
      .then(data => {
          ...
    });
}
</script>

<VirtualList height={400} itemSize={42} itemCount={list.length}>
    ...            
    <div slot="footer">
        <InfiniteLoading on:infinite={infiniteHandler} />
    </div>
</VirtualList>

Hide or edit the noMore message

Hello,
I'd like to hide the noMore message (currently on No more data :) without edit the source. Is it possible?

Thanks for the plugin.

Is there any way to remove no more data message?

Hi, I'm currently using your work for shopping mall project.
And, I noticed that there is no given documents for customizing"no more data" message.
So I leaved an issue to ask you about some ways to customize those messages.

Thank you.

TypeError: Cannot read property 'offsetWidth' of null

Hello,
I'm getting this error, even that it is working nice, but idk how to fix it. I'm running sapper/firebase

Uncaught (in promise) TypeError: Cannot read property 'offsetWidth' of null
    at isVisible (InfiniteLoading.svelte:145)
    at attemptLoad (InfiniteLoading.svelte:232)
    at scrollHandler (InfiniteLoading.svelte:225)
    at InfiniteLoading.svelte:308

<InfiniteLoading> is not a valid SSR component.

Hello, I am not finding a way to overcome this error.

"You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a ."

Help appreciated,
Thank you!

Getting warning for this package after upgrading to sveltekit 2

9:29:01 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

The recommended fix is found here https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

// package.json
  "files": ["dist"],
  "svelte": "dist/index.js",
+ "exports": {
+   ".": {
+     "svelte": "./dist/index.js"
+   }
  }

Typescript types declaration

Hey there. In case you're interested, I created a small declaration file for Typescript types for this library for my own use.

declare module "svelte-infinite-loading" {
	export interface InfiniteLoadingProps {
		distance?: number
		spinner?: "default" | "spiral" | "circles" | "bubbles" | "wavedots"
		direction?: "top" | "bottom"
		forceUseInfiniteWrapper?: boolean | string
		identifier?: any
	}

	export default class {
		$$prop_def: InfiniteLoadingProps
	}
}

If you add it to the files shipped to npm that would allow typescript users to get type information.
I'm just sharing it here in case that might interest you, but feel free to close this issue if you don't care :)

Cheers!

Enable CodeQL

Enable CodeQL in the settings after releasing 2.0.0