[Masonry] Elements do not break into columns properly until refresh

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When coming from another react-router page, elements do not get broken into columns correctly until page refresh or page resize. Elements are just in one line (on my own website: in one row, in the below sandbox - in one column).

Expected behavior 🤔

Elements should always be correctly broken down into columns specified on Masonry component properties.

Steps to reproduce 🕹

1. Open https://codesandbox.io/s/modest-water-mkd26?file=/src/App.js
2. Click “List” link on the bottom of the screen
3. Notice how all images are rendered in one column instead of 5
4. To repeat: Click “Home” link on the bottom
5. Refresh the view (near the view URL bar)
6. Click “List” link again

Notes:

• Happens only the first time when coming from another route. If refreshed while being on the list page, it renders ok.
• Also, the problem disappears when using specific height, e.g. height: "213px", but I need to keep the aspect ratio, since I don’t know what the height should be.
• When I remove the image component, and leave only the box with specific height, the problem goes away as well.

Context 🔦

I need a solution to break items into a grid with the desired number of columns based on a breakpoint.

Looks like the ImageList is buggy for this ( https://github.com/mui-org/material-ui/issues/30429 ), and Masonry seems to be also bugged.

The idea is to avoid manual width calculations for each breakpoint. Any ideas on a solution or possible workarounds?

Your environment 🌎

`npx @mui/envinfo`

Browser used: Google Chrome

JustisMac:website asjustis$ npx @mui/envinfo
npx: installed 2 in 2.957s

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 88.0.1
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.62 
    @mui/core:  5.0.0-alpha.54 
    @mui/icons-material: ^5.2.5 => 5.2.5 
    @mui/lab: ^5.0.0-alpha.62 => 5.0.0-alpha.62 
    @mui/material: ^5.1.0 => 5.1.0 
    @mui/private-theming:  5.1.0 
    @mui/styled-engine:  5.1.0 
    @mui/styles: ^5.2.3 => 5.2.3 
    @mui/system:  5.1.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.0 
    @types/react:  17.0.35 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

[hbjORbj]

This issue seems to have been fixed.

I tried the exact same code sandbox of yours with the latest version of @mui/lab, and the issue is gone.

Here is a working codesandbox: https://codesandbox.io/s/cold-http-rmzzkv

[asjustis]

If you are in a rush, I’d say setting a specific height to images is the most reliable solution for now. If you are going to keep using 213px for both width and height for image containers, you can set image’s height to 120px in order to keep the aspect ratio. That’s the height rendered by browser when you don’t set a specific height.

Thanks @hbjORbj , following your advice, decided to make my images square to explicitly set height as well. Not ideal, but perfectly fine workaround until the issue is fixed 😃)