[ember-sequential-render] Design/Architecture Discussion

[kanalveli-ramachandran]

Please post any queries or clarifications on the design of this addon in this discussion

[takshch]

@kanalveli-ramachandran
Let's say we have 2 routes with parent-child relationship. Now, when i visit the child route without visiting parent route first, then I want child route template to be rendered first because user wants to see the child routes content first.
So, is it possible to render child route template first and then render parent route template?

[kanalveli-ramachandran]

@takshch Do you mean nested routes? If you can share an ember twiddle with your use case, It will help cut down misunderstandings.

[takshch]

@kanalveli-ramachandran Yes, I mean nested Routes. If you still didn't get my point, then please let me know.

[kanalveli-ramachandran]

templates/book.hbs

<element A>
<element B>
{{outlet}}
<element C>

templates/book/page.hbs

<element D>
<element E>

The regular render order for this example would be, A -> B -> C -> D -> E (If page route has a blocking asynchronous model)

If you want to switch out the priority to D -> E -> A -> B -> C,

templates/book.hbs

<SequentialRender @renderPriority={{2}}...>...<element A>...</SequentialRender>
<SequentialRender @renderPriority={{2}}...>...<element B>...</SequentialRender>
{{outlet}}
<SequentialRender @renderPriority={{2}}...>...<element C>...</SequentialRender>

templates/book/page.hbs

<SequentialRender @renderPriority={{0}}...>...<element D>...</SequentialRender>
<SequentialRender @renderPriority={{1}}...>...<element E>...</SequentialRender>

Please refer to the docs for the complete syntax.

Points to consider,

1. While this is possible, In case your lower priority parent elements are trivial, and you have to wait for some async data to render the child elements, Do consider letting the original order be.
2. Please ensure to add simple placeholder loaders to avoid layout shift when the lower priority elements pop into place.