scroll position reset on slow loading fastboot served pages

I know why this is happening, I’m not sure what the correct solution is yet.

If a page is served with Fastboot the immediate render is available. Then if Ember is slow to instantiate for any reason if you’ve scrolled down the page when the App starts the scroll position is reset. This is not the correct experience.

I suspect the correct thing to do is if the state is new assume the current scroll position rather than 0,0

[bcardarella]

Keep in mind we can’t simply assume the current x,y position of scroll here. One of the reqs of this lib is to reset the scroll position on each page transition, or reposition if it is in history.

So there needs to be a way to distinguish that this is an app instantiation event and ember is taking over from fastboot rendered page.

There could be a flag in an initializer for the service that is a hasStartedUp or something like that, defaulted to false. So on first read it will default to current browser’s scroll position. On additional reads it will default to 0,0

[courthead]

There are two issues. The first is what @bcardarella pointed out here, which is that this line is resetting the scroll position to 0,0 without taking into account where the user was scrolled before app instantiation happens.

However, even if you work around that, there’s a second issue (also pointed out by @bcardarella in #17) that causes a very unpleasant jump. Right at app instantiation, Ember erases all the HTML that came from FastBoot and renders its own HTML. That causes the app to scroll to the top of the page, and the router-scroll service’s update function isn’t called until didTransition happens a split second later.

Here’s a temporary hack to fix both of these problems. I put the following in my top-level application route:

import { scheduleOnce } from 'ember-runloop';

export default Route.extend({
  setupController() {
    this._super(...arguments);

    if (!this.get('fastboot.isFastBoot')) {
      const routerScroll = this.get('router.service');
      routerScroll.set('key', window.history.state.uuid);
      routerScroll.update();

      scheduleOnce('afterRender', this, () => {
        const scrollPosition = routerScroll.get('position');
        window.scrollTo(scrollPosition.x, scrollPosition.y);
      });
    }
  },
});