React Lazy Loading

For lazy loading the React components RVS provides as LazyReactValuSearch class to make it easier.

Split the Valu Search code to two files: valu-search.js and valu-search-lazy.js.

In the non-lazy file you import the ValuSearch, instantiate it, export it as the default export and create the Search Component.

valu-search.js

import { ValuSearch } from "@valu/react-valu-search";

const vs = new ValuSearch({
    customer: "<customer id>",
    apiKey: "<api key>",
});

export function MySearch() {
    return (
        <vs.Provider>
            <vs.Results />
        </vs.Provider>
    );
}

export default vs;

And in the lazy file you create the lazy loader and the dynamic import using the @valu/react-valu-search/lazy/react submodule:

valu-search-lazy.js

import { LazyReactValuSearch } from "@valu/react-valu-search/lazy/react";

const loader = new LazyReactValuSearch({
    load: () => import("./valu-search"),
});

export const useLazyValuSearch = loader.useLazyValuSearch();

Here we export the useLazyValuSearch() React hook from the loader which can be used to trigger the lazy load when we need it.

WIP...