Not working when component itself has more content to cover visible area

reactarray commented 6 years ago

i have 2 components ComponentA & ComponentB

i have added h1 tag in ComponentA and img tag ComponentB both components are included in one main component called App Component both components have console.log() added Now 1) when i add lots of <br /> between both component in App component it first log ComponentA and when i scroll to bottom when ComponentB is visible it logs it in console. which is as expected and works fine 2) now when i remove those lots of <br /> added between both component and add that
in ComponentA, it logs both ComponentA & ComponentB in console even when ComponentB is not visible in screen yet.

find attached code with issue , check log in chrome console. https://www.screencast.com/t/7kW0kxyLH3

react-loadable-visibility.zip

tazsingh commented 6 years ago

Hi @reactarray, it appears that your loading component doesn't correlate with the size of the component that you're loading. That is, your loading component is a div which is quite small.

The library will look to see if those loading components are inside the view port, and then load the underlying loaded component. If you were to change the loading component to add lots of br tags in there as well, do you get the behaviour that you're looking for?

I'm closing this issue but feel free to re-open if it doesn't work as intended.

reactarray commented 6 years ago

@tazsingh yes even after adding lots of br tags its not working as expected, thats why i also attached sample code with this. check attached zip file in earlier comment https://www.screencast.com/t/zx0chnz1s

tazsingh commented 6 years ago

Yes I took a look at the sample code. Have you tried changing your App.js to:

import React, { Component } from 'react';
import LoadableVisibility from 'react-loadable-visibility/react-loadable'

const LoadableComponentA = LoadableVisibility({
  loader: () => import('./ComponentA'),
  loading() {
    return <div>Loading ComponentA... <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  }
});

const LoadableComponentB = LoadableVisibility({
  loader: () => import('./ComponentB'),
  loading() {
    return <div>Loading ComponentB...</div>
  }
});

class App extends Component {
    render(){
        return (
            <div>
                <LoadableComponentA />
                <LoadableComponentB />
            </div>
        )
    }
}

export default App;

The element's visibility is based on the loading element. Therefore if you want the underlying component to appear based of its dimensions, you'd have to ensure that the loading component has the same dimensions.

You can take a look at an example of this on my website:

stratiformltd / react-loadable-visibility

Not working when component itself has more content to cover visible area #10