@furystack/shades/esm/components/lazy-load.js

A lightweight UI framework for FuryStack with JSX support

import { Shade } from '../shade.js';
import { maybeViewTransition } from '../view-transition.js';
export const LazyLoad = Shade({
    customElementName: 'lazy-load',
    render: ({ props, useState, useDisposable }) => {
        const [error, setError] = useState('error', undefined);
        const [component, setComponent] = useState('component', undefined);
        const tracker = useDisposable('loadTracker', () => {
            const state = {
                factory: null,
                active: true,
                [Symbol.dispose]() {
                    state.active = false;
                },
            };
            return state;
        });
        const isNewFactory = tracker.factory !== props.component;
        if (isNewFactory) {
            tracker.factory = props.component;
            const factory = props.component;
            factory()
                .then((loaded) => {
                if (tracker.active && tracker.factory === factory) {
                    void maybeViewTransition(props.viewTransition, () => {
                        setError(undefined);
                        setComponent(loaded);
                    });
                }
            })
                .catch((err) => {
                if (tracker.active && tracker.factory === factory) {
                    setComponent(undefined);
                    if (props.error) {
                        setError(err);
                    }
                }
            });
            return props.loader;
        }
        if (error && props.error) {
            return props.error(error, async () => {
                const factory = props.component;
                try {
                    setError(undefined);
                    setComponent(undefined);
                    const loaded = await factory();
                    if (tracker.active && tracker.factory === factory) {
                        void maybeViewTransition(props.viewTransition, () => {
                            setComponent(loaded);
                        });
                    }
                }
                catch (e) {
                    if (tracker.active && tracker.factory === factory) {
                        setError(e);
                    }
                }
            });
        }
        if (component) {
            return component;
        }
        return props.loader;
    },
});
//# sourceMappingURL=lazy-load.js.map