How to use the ember-app-scheduler.whenRoutePainted function in ember-app-scheduler

_routeDidChange(transition) {
    if (get(this, 'isFastBoot')) {
      return;
    }

    const delayScrollTop = get(this, 'service.delayScrollTop');
    const scrollWhenPainted = get(this, 'service.scrollWhenPainted');
    const scrollWhenIdle = get(this, 'service.scrollWhenIdle');

    if (!delayScrollTop && !scrollWhenPainted && !scrollWhenIdle) {
      // out of the 3 options, this happens on the tightest schedule
      scheduleOnce('render', this, () => this.updateScrollPosition(transition, true));
    } else if (scrollWhenPainted) {
      // as described in ember-app-scheduler, this addon can be used to delay rendering until after First Meaningful Paint.
      // If you loading your routes progressively, this may be a good option to delay scrollTop until the remaining DOM elements are painted.
      whenRoutePainted().then(() => {
        this.updateScrollPosition(transition);
      });
    } else {
      // as described in ember-app-scheduler, this addon can be used to delay rendering until after the route is idle
      whenRouteIdle().then(() => {
        this.updateScrollPosition(transition);
      });
    }
  }
});

init() {
    this._super(...arguments);
    this.set('whenRoutePainted', false);

    whenRoutePainted().then(() => {
      this.set('whenRoutePainted', true);
    });
  },
});