Notifying Parent Component of style changes of elements inside of a ChildComponent

Questions
1

What is the general method to approach notifying a parent component of style changes in an element which is in a child component?

In my app we have a few components. The relevant ones are,

  • RootContainer

    1. Is what it’s named, a container from which we manipulate all the rest of the child/sibling components in our app.

  • LoadingPage

    1. This component displays a gif which is an animation of the company logo and then hides itself, after 2.5 seconds (when the gif ends) by setting the display style to none of loading-page-container using setTimeout in hide_handler. Just to be clear LoadingPage.hbs looks like:

       <div id="loading-page-container"{{did-insert this.hide_handler}}>
    <div id="loading-page-animoji-container">
       <picture id="loading-page-animoji">
          <source srcset="assets/images/loading-page-animoji-large.gif" media="(min-width:768px)">
          <source srcset="assets/images/loading-page-animoji-small.gif" media="(min-width: 320px)">
          <img src="assets/images/loading-page-animoji-small.gif" alt="PROBLEM">
       </picture>
   </div>
 </div>

  • NavigationBar

    1. Contains Links For home, about, contact us etc.

The structure of RootContainer.hbs is :

<div id="root-container">
  <LoadingPage @timeout=3000 />  
  <NavigationBar />
  <Component1 />
  <Component2 />
  .
  .
  .
</div>

I’d like to render NavigationBar only after the LoadingPage hides itself. With something along the lines of:

<div id="root-container">
  <LoadingPage @timeout=3000 />  
  {{#if LoadingPageIsHidden }}
     <NavigationBar />
     <Component1 />
     <Component2 />
     .
     .
     .
  {{/if}}

</div>

  • Since we hide LoadingPage by setting the display style to none of loading-page-container, I thought I could use a MutationObserver similar to This because there isn’t really event handling for changes in element attributes.

  • I thought about using tracked variables but they only seem to work in conjuction with an event processed by an action.

  • Alternatively could this problem be solved by using ember models? From what I understand templates are notified of changes to the model without me setting up observers/(event _handlers + listeners)

Sorry this was a bit long-winded suffice it to say, how would you implement LoadingPageIsHidden?

2

Hi, there. I think a simple solution is to leverage Ember’s loading template. It may be possible to use a variable (or an addon) to achieve the idea that you presented. Because I haven’t tried it before, I wonder if it’d be hard to get timing right (both in app and in tests).

A loading template will show while data is loaded and other possible promises are fulfilled. You can define the loading template at the application level, or at an individual route level.

Here’s an example from a hobby app: