Initial layout shows only one column

[adsee42]

Description

I'm using react-infinitegrid with material-ui.

When the page is opened, GridLayout shows only one row with initial images stacking together (see images below)

After changing the window size by dragging the browser frame, the images show as expected.

Any idea why is this happening?

[daybrush]

@adsee42

I want to know how you use infinitegrid.

Any test or sample code?

[daybrush]

@adsee42

I think it is similar to this issue, but I think it will be solved together if this problem is solved.

#340

[adsee42]

@daybrush

Thank you!
I would love to show some code, but infinitegrid was pretty deep inside the code structure that produced the problem and I don't know how make a SIMPLE code to reproduce this. sry...

In fact another page with similar code structure worked great; the only difference is that,
in the above code with problem, I split the infinitegrid into another js file (file B) inside a functional component and referenced it in a class component (file A).
And after I put infinitegrid inside the class component in another file (same file), it worked as expected, no strange layout.

It could be the cause, but I'm not sure without any experiment.
I'll comment here if anything found.

[adsee42]

I just noticed similar layout in another page.

The infinitegrid was inside a panel of react-swipeable-views.

If I open the page, and change panel to for example tab 2 before the images are loaded from server, and switch back after the images are loaded, all images stacked together, not one column but 3 columns.

According to Chrome dev-tool, the container is full width but only has height 30px.

So my guess is that when the images are loaded, if the container is not showing, its size is mis-calculated and caused the images' position to be strange and stacked together.

Is there any way to add width: 100%, height: 100% to the container?

[daybrush]

it's not possible. But if something has changed before the image is loaded, would you like to call infiniteGrid.layout(true)?

[adsee42]

Sry if it's already documented somewhere, but what is the timing and where to call .layout(true)?

From the document, I only found this example. How could I do this in React?

I tried const gridRef = React.useRef(null) with <GridLayout ref={gridRef} ...,
and called gridRef.current.layout(true) in onLayoutComplete.
Obviously this is the wrong way (caused infinite loop..)

I also tried useEffect and call gridRef.current.layout(true) when images changed.
And by console.log(gridRef) and calling layout in dev-tool console didn't work neither.

So may be useRef is not the right to do it in React?

[daybrush]

@adsee42

It is not right to call in onLayoutComplete.

Once that situation is not common. Inside the component, there is code waiting for the image to load.

Was there no image when it was first loaded? It works as if it weren't.

When all images are loaded, layout should be called only once.

[adsee42]

useRef did not work.

But I managed to avoid this problem by unmount the grid every time swipeable-views goes to other panels.

Now it works perfectly, though reload of images happening every time I switch panel back. (Maybe time to do some cache with react-query.)

After the project I'm currently working on is finished, I'll try to make a codesandbox example to see if I can reproduce this.

[quyctd]

@adsee42 Hi, could you show me the code to unmount the grid? I have the same problems.

[adsee42]

@quyctd
Nothing complicated here, just use a switch and return panel.
Say you have 3 panels, and 3 tabs.
if current tab === 1
return panel1.
That way, I think I unmounted the panel...
If it's not clear, I would paste some code.

[quyctd]

@adsee42 Thank you for the sharing.

I realized that my issue happens because of the width of the GridLayout container change when list items doing the update. So I fixed this issue by just added width: 100% into CSS.

[stale]

This issue/PR has been automatically marked as stale because it has not had any update (including commits, comments, labels, milestones, etc) for 30 days. It will be closed automatically if no further update occurs in 7 day. Thank you for your contributions!

한글

이 이슈/PR은 commits, comments, labels, milestones 등 30일간 활동이 없어 자동으로 stale 상태로 전환되었습니다. 이후 7일간 활동이 없다면 자동으로 닫힐 예정입니다. 프로젝트 개선에 기여해주셔서 감사합니다.