[BUG] tiles are still rendered as whitespace when the content length < pageSize

[mesqueeb]

Describe the bug

When I use eg. :pageSize="40" and I scroll all the way to the bottom, the final section of the virtual grid will render tile placeholders for content that doesn't exist.

Since a single tile is about 1/3 of the screen height for me, it can render an immense amount of whitespace at the bottom.

Here is the DOM what the placeholder DOM element looks like:

You see that the previous one DOM element is the last one I have with content.

Expected behavior

The bottom tiles should not be rendered as whitespace when not provided by pageProvider. (Eg. the page provider returns only 1 result, and pageSize is 40, then ideally we only render 1 grid row or even better, 1 grid tile.)

[github-actions]

🎉 This issue has been resolved in version 1.2.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[rocwang]

Thanks for the bug report! It's been fixed in v1.2.2.

[mesqueeb]

@rocwang Thank you so much!
I'm using 2.0.0-alpha.1, any chance you can fix it on that branch as well? : )

No rush though! thanks so much for all your work!

PS: Sorry I should've mentioned the version I was using!!

[rocwang]

I'm using 2.0.0-alpha.1, any chance you can fix it on that branch as well? : )

@mesqueeb I don't I never released a 2.0.0-alpha.1 version on npm or have such branch on Github.
Did you mean some other library you use?

[mesqueeb]

@rocwang Oh... I was looking at the wrong package!! Sorry 😅 ( I'm so used to looking at @next branches for Vue 3 :P )

Something seems to have gone wrong in the latest version, maybe just for us?

Once I installed it the grid won't render and there's this error:

[rocwang]

Sorry, the screenshot didn't help much. I couldn't replicate the issue.

It looks like this issue. Maybe try reinstall the package?

If it still doesn't work for you, would you mind rend over a reproducible example? (e.g. a git repo)

[mesqueeb]

@rocwang I'm still trying to determine the cause, but cannot find it yet...
The latest version just won't work, but the one before that does.

Could it have something to do with rendering the grid while it's being hidden because some parent element is set to display: 'none' (v-show) ?

PS:
I'm going to prepare my repo in a zip for you in the next few days and will send it over! Happy to sponsor you for all your hard work.

[rocwang]

@rocwang Oh... I was looking at the wrong package!! Sorry 😅 ( I'm so used to looking at @next branches for Vue 3 :P )

Something seems to have gone wrong in the latest version, maybe just for us?

Once I installed it the grid won't render and there's this error:

Although https://github.com/rocwang/vue-virtual-scroll-grid/releases/tag/v1.2.3 adressed #154 instead of your error above directly, give it a try it maybe?

[mesqueeb]

@rocwang I have just tested on 1.2.3, same issue.

I have just emailed your our repo with steps for you to open it on your end.

If you have some time we would greatly appreciate it.

[rocwang]

Thanks for sending over the example over email.

I managed to get it to work by fixing the version of vue in the project to 3.2.22 as vue-virtual-scroll-grid@1.2.3 was built and tested against vue@3.2.22. It looks like it has something to do with multiple versions of vue packages sitting under the same project, but I'm pretty sure vue-virtual-scroll-grid doesn't include vue in the package.

Another change I made was removing the peerDependencies of vue from your db package as I didn't see it's used there.

While my fix works, it looks like your project use Quasar, which has its own dependant vue version. So I think the best solution might be upgrading Quasar to some version that depends on vue 3.2.22+. Don't take my fix as the final solution.

See:

• Cannot read property 'isCE' of null in remote component with slot using Module Federation vuejs/core#4344
• component with a slot from a component library is crashing the main vue application vuejs/core#4478

A fixing patch is emailed to you.

[mesqueeb]

@rocwang hey Roc!

Thank you very much for resolving my issue with the dependencies.

I just tried the latest version, but still found some issues.

Eg. When the pageSize is 40 and the array I put in is about 69 long, I still see about 11 tiles that should not render but are being rendered.

On mobile view for us it has 3 tiles per row, and therefore will take up many many times the screen height.

Can you look into the issue again? Let me know if you need anything from me.

Thank you very much.

[rocwang]

@mesqueeb

I try to replicate the issue with your parameters (pageSize = 40, length = 69) under vur-virtual-scroll-grid@1.2.3 using this minimal repo: https://github.com/rocwang/vvsg-issue-152. However, it looks OK to me there and no item would be rendered beyond the 69th item.

Could you have a play there and see if you can see the issue. Or consider double checking the installed version of vur-virtual-scroll-grid, as the symptom was found in v1.2.1 indeed.

[rocwang]

@mesqueeb
I had another play.
I see, it looks like the bug happens when the viewport is resized. Will look into that.

[mesqueeb]

@rocwang thank you very much. I will send you another reproduction later today. Thank you for your patience.

[rocwang]

@mesqueeb I wonder if this is still an issue to you?

[mesqueeb]

@rocwang i'll check and let you know soon!!

[rocwang]

Given the inactivity of this ticket, I'm going to close it.
Feel free to reopen it if needed.