Skip to main content
This release is 3 versions behind 0.1.4 — the latest version of @jhenbert/svelte-lazy-component. Jump to latest

Built and signed on GitHub Actions

It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
It is unknown whether this package works with Browsers
JSR Score
58%
Published
3 months ago (0.1.1)

LazyComponent

LazyComponent is a simple and efficient Svelte component for lazy-loading other components in your Svelte applications. It uses IntersectionObserver to load components only when they are about to enter the viewport, improving your app's performance by reducing initial load times and network requests.

Table of Contents

Features

  • Efficient lazy loading: Only loads the component when it's about to appear in the viewport.
  • IntersectionObserver-based: No need to manually calculate scroll positions.
  • Plug-and-play: Easy to use and integrate with any Svelte project.
  • Customizable: Provides options to control loading behavior and fallbacks.

Installation

npx jsr add @jhenbert/svelte-lazy-component

Usage

Provide a custom fallback to be displayed while the component is loading:

<script>
  import LazyComponent from '@jhenbert/svelte-lazy-component';
</script>

<LazyComponent this={() => import("$lib/components/CallToAction.svelte")}
  ><div slot="fallback">loading component...</div>

  <svelte:fragment slot="component" let:Component
    ><Component />
  </svelte:fragment>
</LazyComponent>

Props

this props accept dynamic import of your component.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check out the issues page.

License

This package is MIT licensed.

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add jsr:@jhenbert/svelte-lazy-component

Import symbol

import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";

---- OR ----

Import directly with a jsr specifier

import * as svelte_lazy_component from "jsr:@jhenbert/svelte-lazy-component";

Add Package

npx jsr add @jhenbert/svelte-lazy-component

Import symbol

import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";

Add Package

yarn dlx jsr add @jhenbert/svelte-lazy-component

Import symbol

import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";

Add Package

pnpm dlx jsr add @jhenbert/svelte-lazy-component

Import symbol

import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";

Add Package

bunx jsr add @jhenbert/svelte-lazy-component

Import symbol

import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";