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

[ysk3a]

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
   

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]

@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]

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]

@ysk3a

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

The state change was executed inside ngZone.

#537

[daybrush]

@ysk3a

4.10.0 is released. Test it again.

[ysk3a]

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:

• i've only forked the version with 4.10.0-beta.1 and updated the version to 4.10.0. but then codesandbox started to complain "TypeError Cannot read properties of undefined (reading 'Component')".
  https://codesandbox.io/s/spring-pond-hfeco3 → https://codesandbox.io/s/inspiring-ace-579y7b?file=/src/app/app.module.ts
  🤷‍♂️

• when opening the angular codesandbox link from https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-masonryinfinitegrid--masonry-infinite-grid-template , it also gives similar error "TypeError Cannot read properties of undefined (reading 'Component')".

• I've also tried to see if the 4.10.0 works in stackblitz but the stackblitz version just errors out with "Cannot find module '@egjs/infinitegrid' or its corresponding type declarations." 🤷‍♂️
  https://stackblitz.com/edit/angular-ivy-ts-strict-enabled-2fajoa?file=src%2Fapp%2Fapp.component.ts
  so I can't seem to get stackblitz version demo to work.

---

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]

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.