Mobile Screen Schedule often refreshes, issues from lazy loading

[mariobehling]

The experience of looking at schedules on mobile screens is bad since lazy loading is used, compare https://eventyay.com/e/7cfe0771/schedule.

The screens often requiring refreshing. Scrolling down suddenly skips sessions and if the user is inactive the entire schedule needs to be reloaded.

Should the schedule of each day be fully loaded instead of lazy loading?

[Leslie-Wong-H]

/assign @Leslie-Wong-H

[Leslie-Wong-H]

Intuitive reason:
https://github1s.com/fossasia/open-event-frontend/blob/HEAD/app/templates/public/sessions.hbs#L128-L129
In mobile view, the ember-infinity component somehow does not disappear when finishing fetching the exact next page. The table above gets re-rendered but does not push the extra space down but up, so InfinityLoader keeps occupying the space and fetching data until all session data is fetched.

ember-infinity docs says,

Whenever the infinity-loader component is in view, we will fetch the next page for you. source

[Leslie-Wong-H]

Surprisingly, they forgot to add a unique key to the for-loop rendering, a common pitfall faced by all JavaScript frameworks.

╯︿╰

https://github.com/Leslie-Wong-H/open-event-frontend/blob/311439dfff908cbe4200849a8eb91cd980b234de/app/templates/public/sessions.hbs#L89

It works fine this way. PR coming soon.

[Leslie-Wong-H]