[Questions & Feature Request] Grid flash when width changed and wish the grid can behave like google image

[hunterliu1003]

I have a ProfilesGrid component that is using vue-virtual-scroll-grid, and click on a ProfileItem inside of ProfilesGrid will open a ProfileDetail aside of ProfilesGrid.

I expect when clicking a ProfileItem, the VirtualGrid should directly jump to the current index, so I use the scrollTo and set the scrollBehavior to auto.

Video:

If you check out this video frame-by-frame, you will see:

• There is a flash when open a ProfileDetail
• The scroll position is changed after the ProfileDetail closed

Video:

2022-09-26.2.59.52.mov

You can try it with this reproduction repo: https://github.com/hunterliu1003/poc-grid-flash

---

So my questions are:

• Is it possible to remove the flash when the width of VirtualGrid changed?
• Is it possible to keep the scroll position after the ProfileDetail closed? (Maybe execute scrollTo every time when the width changed)

I expect the grid component can behave like google images
Video:

Thanks!

[mesqueeb]

@rocwang let me know if we can sponser some of your time for this issue.

[rocwang]

I can see that ProfileDetail is not overlayed above ProfilesGrid, so when ProfileDetailis toggled, the size of ProfileDetail will change and trigger a re-layout and re-render.

There is a flash when open a ProfileDetail

Both the re-render, and your change to the scrollTo props, plus the use of :key on the grid items (in #230) may contribute to the flash. As the component needs to scroll to the new position, wait for the pageProvider to resolve with new items, and then re-render the visible items.

I don't have a solution here. Reverting #230 might help with the flash as "without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible", but then we will have #227 back.

The scroll position is changed after the ProfileDetail closed

I've released a new version -- v1.8.0 which added a new prop respectScrollToOnResize to support your use case here. Setting it to true will make the grid stick to the position set by scrollTo when the grid is resized.

See here for docs. It's also added to the demo site.

[mesqueeb]

@rocwang

As the component needs to scroll to the new position, wait for the pageProvider to resolve with new items, and then re-render the visible items.

I understand that there is no way around pageProvider from being called again, as the width of the grid changes, so the visible tiles become out-of view, which in turn calls pageProvider again.

And I also understand that #230 is the reason for the flash, as the keys get changed every time pageProvider is called.

However, I feel like the solution is that you allow us to pass our own key. Each tile already has a unique ID anyway.

Something as simple as this: keyPropName="id"

could allow your library taking that props from each object in the array the pageProvider resolves to.

This way Vue's key optimisation should work and I believe this should also be another way #227 could have been fixed.

You can keep the current logic for when no keyPropName is passed so there's no breaking changes.

Also, feel free to choose another name than keyPropName

---

edit: what I think/hope will happen with this change:

• I believe this could happen in the same Vue tick:
  1. grid width becomes half as wide
  2. grid scrolls down to new tile position, because it got pushed further down with new width
  3. grid executes pageProvider for this new position
  4. our implementation of pageProvider will instantly return the same results
• Then on next Tick, Vue will redraw the actual grid in the DOM
  1. now most of the same tiles will be shown from the start and they have the same key as it's our non-changing id
  2. so Vue decides to not redraw these tiles at all

[mesqueeb]

my naming scheme is terrible.

Had a longer think.

We could also just add a prop called getKey which is a function that receives the internalItem object and whatever it returns will be used as the key.

This way we'd be able to address everyone and anyone's use case and we can even experiment what will be the most performant way for us, eg. using our internalItem.value.id vs just using the internalItem.index

Further, when getKey is undefined, we can keep the current logic. So no breaking changes.

[mesqueeb]

@rocwang
#256
this is what it would look like. What do you think?

[hunterliu1003]

@rocwang

I set :respectScrollToOnResize="true", and it's working!
I've tried to revert #230 and use #256, that improve the performance a bit but the flashing issue is still exist.

Please checkout to the dev branch of this reproduction repo
Video:

Do you have any direction to improve it?

[github-actions]

🎉 This issue has been resolved in version 1.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀