Lazy loading mounting all children

[dmitrika]

Hey guys :wave:

As a result of changes in https://github.com/oliviertassinari/react-swipeable-views/issues/453 right now after mounting all children are rendered.

My use case: I use react-swipeable-views on SERP for a listing preview gallery, each gallery has 5 pictures. So after mount, we might end up with Nx5 images to be loaded, even if only N of them would be visible.

I would like to propose API change to be able to provide a prop to change a number of slides to be rendered in advance:

// Example of propTypes and defaultProps
SwipeableViews.propTypes = {
  ...propTypes,
  /**
   * This is the number of rendered in advance childs if lazy loading is on
   */
  renderedInAdvance: PropTypes.number, 
}

SwipeableViews.defaultProps = {
  ...defaultProps,
    renderedInAdvance: 1, 
}

// Example of test case
it('should render in advance number of children according to prop', () => {
    const wrapper = mount(
        <SwipeableViews index={0} renderedInAdvance={2} >
          <div>{'slide n°1'}</div>
          <div>{'slide n°2'}</div>
          <div>{'slide n°3'}</div>
          <div>{'slide n°4'}</div>
        </SwipeableViews>,
    );

    assert.strictEqual(wrapper.text(), 'slide n°1');
    clock.tick(1);
    wrapper.update();
    assert.strictEqual(wrapper.text(), 'slide n°1slide n°2slide n°3');
});

Something like this... I'm not sure if it's aligned with initial ideas, I'm ready to implement this, first want to verify with repo maintainers.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I was expecting lazy loading to prevent over-fetching via rendering only active element (means downloading the only active picture), or at least active + 1.

Current Behavior

On mount we render all children.

Steps to Reproduce (for bugs)

Check out default code-sandbox example to verify that all children rendered. https://codesandbox.io/s/x8x11zjmp

Test case: https://github.com/oliviertassinari/react-swipeable-views/blob/master/packages/react-swipeable-views/src/SwipeableViews.test.js#L614

Context

As far as I understood it was done to enable heavy views to be rendered in advance. But for me that looks like we completely removed "lazy-loading" feature, we just skip rendering on the server. In case of images, all of them would be loaded on the client.

Your Environment

Tech	Version
react-swipeable-views	last version
React	last version
platform	all platforms

[Rc85]

Is the Virtualize HOC what you're looking for? Upon inspecting the elements in the demo, it looks like it renders/mounts the previous 2 and the 2 after. You can also increase the number slides to render/mount using overscan.

I haven't tried it though.