DOESNT RE-RENDER - If children sizes change

[atumas-bananamilk]

Description

Justified grid doesn't re-render items if their sizes change.

Steps to check or reproduce

I fetch multiple images but the initial grid stays, how do I re-render the grid to dynamically resize every item if they change?

My code:

...
const [images, setImages] = useState<any[]>([])

...

<JustifiedGrid
  gap={5}
  defaultDirection={"end"}
  align={'justify'}
  columnRange={[1,4]}
  rowRange={0}
  sizeRange={[100,500]}
  isCroppedSize={false}
  displayedRow={-1}
  useResizeObserver={true}
  observeChildren={true}
  autoResize={true}
>
  {images.map((x: any, index: number) => (
    <div key={index} className='w-full overflow-hidden'>
      <Image src={x?.url} alt='' className='' />
    </div>
  ))}
</JustifiedGrid>

Here's the result:

aaaa.mov

[daybrush]

@atumas-bananamilk

Since the key is an index, it is difficult to detect size changes if the item has the same key.

Try using the renderItems method every time you search it.

grid.renderItems({ useOrgResize: true });

[atumas-bananamilk]

@daybrush

Changing key to image url worked, it now resizes automatically.

There's another problem - before loading all images, it quickly flashes them in their real size before actually fitting into the grid. You can see it happening in the first 3 seconds of the video on the first search.

Is that solvable? I tried with other libraries but don't see the same issue.

[daybrush]

@atumas-bananamilk

It can't be helped because there is time for the image to load.

1. In the first render, You can hide it by setting position: absolute; left: -9999px; top: -9999px;

2. If the width x height size can be known in advance, it can be solved.

<img data-grid-width="100" data-grid-height="100" />

[atumas-bananamilk]

@daybrush so how do other packages do it? obviously must be something the way you implemented the grid. Thanks anyways!

[daybrush]

@atumas-bananamilk

MasonryGrid, JustifiedGrid FrameGrid, ... works the same in all Grids.