search

naver / egjs-infinitegrid

A module used to arrange card elements including content infinitely on a grid layout.
https://naver.github.io/egjs-infinitegrid/
MIT License
2.23k stars 95 forks source link

Blank space scrolling up in stackblitz? and vue/angular codesandbox from website errors out? #535

Open ysk3a opened 1 year ago

ysk3a commented 1 year ago

Description

Hello, I came across this library and thought it was really cool and wanted to play around with it in my angular 15 project. I tried to first use NgxMasonryInfiniteGrid with one column with the main goal of seeing if it is possible to use this library to use as virtual list/scroll with dynamic height items. So I attempted to mimic virtual list with dynamic height in the first codesandbox link and so far so good as it seems that the items are virtualized but scrolling back up show blank space.

I am not sure if this is only on my end and it seemed like it was related to #91 but was already closed.

Steps to check or reproduce

  1. after codesandbox and the page loads, scroll down a while so that the virtualizing happens a few times.
  2. scroll back up Capture

forked from storybook demo with the dummy dynamic height attempt: https://codesandbox.io/s/fragrant-forest-h4fnhz?file=%2Fsrc%2Fapp%2Fapp.component.html

forked from storybook demo with column set to 1 to double check if my additional code was the cause but still shows blank space scrolling up: https://codesandbox.io/s/vigilant-currying-k9eicz?file=%2Fsrc%2Fapp%2Fapp.component.html

daybrush commented 1 year ago

@ysk3a

thanks. Test with version 4.10.0-beta.1.

https://codesandbox.io/s/ngx-infinitegrid-4-10-0-osjimx?file=/src/app/app.component.ts

ysk3a commented 1 year ago

so i am not sure if the change 4.10.0 is working in other cases but it seems that the blank space does not appear when scrolling up after scrolling down with the 4.10.0-beta.1 for this specific codesandbox: https://codesandbox.io/s/spring-pond-hfeco3

but what changed or the cause of the issue?

daybrush commented 1 year ago

@ysk3a

A state change occurred outside ngZone and was not updated (empty space).

The state change was executed inside ngZone.

https://github.com/naver/egjs-infinitegrid/pull/537

daybrush commented 1 year ago

@ysk3a

4.10.0 is released. Test it again.

ysk3a commented 1 year ago

I wasn't able to make the demo codesandbox from https://naver.github.io/egjs-infinitegrid/storybook to work so others who want to inspect the code may encounter this error.

but I think I was able to get it to work after creating an angular codesandbox project from scratch. So after a super brief testing for the masonryinfinitegrid with angular 16 inside codesandbox it seems like there are no blank spaces when scrolling up after scrolling down issue as shown in the demo link: https://github.com/ysk3a/angular-egjs-infinitegrid or directly to codesandbox: https://codesandbox.io/p/github/ysk3a/angular-egjs-infinitegrid so,👍 👍 . but I haven't tested locally though i assume there shouldn't be any issues if it works in the codesandbox...

a few things that I thought I should share when trying to make 4.10.0 to work in codesandbox/stackblitz:

And another thing, I noticed that the docs https://naver.github.io/egjs-infinitegrid/Guides#masonryinfinitegrid has this trackby: randomTrackBy but there isn't any randomTrackby function so I had to remove that trackby since the editor was complaining. Not sure what that track by is used for when the docs have it. 🤷‍♂️ Interestingly, https://codesandbox.io/s/spring-pond-hfeco3 version does not seem to complain that randomTrackby does not exist.

ysk3a commented 1 year ago
DerpPanda

So, I am not sure what happened but after checking the 4.10.0 release info and that there was an update to angular 15, I thought maybe the cause of the previously mentioned error of codesandbox not running was due to version difference?

So I created a stackblitz with angular 15 with 4.10.0 and, unlike the previous message stackblitz link, it seemed to not error out but instead some blank spaces after scrolling issue, scroll limit, and ordering seemed to change again. Though it is inconsistent and I cannot consistently reproduce the behavior. https://stackblitz.com/edit/angular-waiab2-omsatj

This inconsistent behavior was something I noticed only in stackblitz. I didn't notice any strange behavior in a local ng serve in vscode https://github.com/ysk3a/angular-egjs-ngxinfinitegrid or in this codesandbox. https://codesandbox.io/p/sandbox/mystifying-noether-228irq though.

The issue opening codesandbox from https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-masonryinfinitegrid--masonry-infinite-grid-template erroring out is still an issue I am encountering. Not sure if others are experiencing this so I didn't raise another separate issue.