diff --git a/wherehows-web/app/routes/application.js b/wherehows-web/app/routes/application.js index 18b9511167..96b7f52ba5 100644 --- a/wherehows-web/app/routes/application.js +++ b/wherehows-web/app/routes/application.js @@ -164,33 +164,19 @@ export default Route.extend(ApplicationRouteMixin, { }, /** - * We are NOT using the renderTemplate hook to implement any custom rendering logic. Since we don't have a didTransition - * hook for the application route, this hook is being used instead to schedule a banner after initial render in order to - * let users see the animation for banner entrance + * At a more granular level, initializing the banner before the render loop of the entire page ends will results in the + * render loop of the application breaking the css transition animation for our initial banners. This hook is being used + * to schedule banners only after initial render has taken place in order to allow users see the banner animation + * on entry */ renderTemplate() { this._super(...arguments); - run.scheduleOnce('afterRender', this, 'initializeBanners'); - }, - - /** - * Looks for the existence of any banners that may/should exist at app initialization and displays to the user - */ - initializeBanners() { - const model = get(this, 'controller').get('model'); - const { showStagingBanner, showStaleSearchBanner } = model; + const { showStagingBanner, showStaleSearchBanner } = get(this, 'controller').get('model'); const banners = get(this, 'banners'); - - if (showStagingBanner) { - banners.addBanner( - 'You are viewing/editing in the staging environment. Changes made here will not reflect in production', - 'info' - ); - } - - if (showStaleSearchBanner) { - banners.addBanner('components/notifications/partials/stale-search-alert', 'info', true); - } + run.scheduleOnce('afterRender', this, banners.appInitialBanners.bind(banners), [ + showStagingBanner, + showStaleSearchBanner + ]); }, processLegacyDomOperations() { diff --git a/wherehows-web/app/services/banners.ts b/wherehows-web/app/services/banners.ts index a79725e42f..7ba7999075 100644 --- a/wherehows-web/app/services/banners.ts +++ b/wherehows-web/app/services/banners.ts @@ -56,6 +56,19 @@ export default class BannerService extends Service { return banners.length > 0 && (banners.length > 1 || !banners[0].isExiting); }); + appInitialBanners([showStagingBanner, showStaleSearchBanner]: Array): void { + if (showStagingBanner) { + this.addBanner( + 'You are viewing/editing in the staging environment. Changes made here will not reflect in production', + NotificationEvent['info'] + ); + } + + if (showStaleSearchBanner) { + this.addBanner('components/notifications/partials/stale-search-alert', NotificationEvent['info'], true); + } + } + /** * Method to actually take care of removing the first banner from our queue. */ diff --git a/wherehows-web/app/templates/components/notifications/partials/stale-search-alert.hbs b/wherehows-web/app/templates/components/notifications/partials/_stale-search-alert.hbs similarity index 100% rename from wherehows-web/app/templates/components/notifications/partials/stale-search-alert.hbs rename to wherehows-web/app/templates/components/notifications/partials/_stale-search-alert.hbs