Load not work when parent element has display: none;

When I have a <LazyLoad> inside an element with display: none and I change this display to block, the content not load. This content only will load after a scroll interaction.

The code is like that:

export default function App() {
  const [tab, setTab] = useState(1);

  return (
    <div className="App">
      <ul className="tabs">
        <li>
          <button onClick={() => setTab(1)}>tab 1</button>
        </li>
        <li>
          <button onClick={() => setTab(2)}>tab 2</button>
        </li>
      </ul>

      <div className="content">
        <div style={{ display: tab === 1 ? "block" : "none" }}>
          <p>Content of tab 1</p>
          <LazyLoad>
            <img src="https://via.placeholder.com/150?text=Content 1" alt="1" />
          </LazyLoad>
        </div>
        <div style={{ display: tab === 2 ? "block" : "none" }}>
          <p>Content of tab 2</p>
          <LazyLoad>
            <img src="https://via.placeholder.com/150?text=Content 1" alt="2" />
          </LazyLoad>
        </div>
      </div>
    </div>
  );
}

The problem is that:

And the complete code is here:

https://codesandbox.io/s/determined-hoover-z6cff?file=/src/App.js:104-960

[guilouro]

@guilouro Did you found a solution? I’m facing the same problem.

@geraldstrobl I created my own implementation using IntersectionObserver. But before it, I needed to change the location of the <LazyLoad />.

<LazyLoad>
  <div className="content">
    <div style={{ display: tab === 1 ? "block" : "none" }}>
      <p>Content of tab 1</p>
      <img src="https://via.placeholder.com/150?text=Content 1" alt="1" />
    </div>
    <div style={{ display: tab === 2 ? "block" : "none" }}>
      <p>Content of tab 2</p>
      <img src="https://via.placeholder.com/150?text=Content 2" alt="2" />
    </div>
  </div>
</LazyLoad>

[berk9595]

Hi, is it fixed ?