It's look like we can't render a component with children in pending state

[ohardy]

With that:

<Route
        Component={Layout}
        queries={LayoutQueries}
        prepareParams={prepareParamsLayout}
        render={renderLayout}
      >
        <Route
          Component={Content}
          queries={ContentQueries}
          prepareParams={prepareParamsContent}
          render={renderContent}
        />
      </Route>

And a generic render who return a loading component if no Component or props.

I want to render Layout all the time, but actually i receive null Component in renderLayout call of Layout while Content data is loading.

Sorry for my english, I am french ^^

[taion]

You shouldn't be receiving a null component there in any case. Do you have a stack trace/

[ohardy]

Not sure it will help ;)

Component is not null after ContentQueries resolved

(anonymous function)	          @	createElements.js?a0af:54
createElements	                @	createElements.js?a0af:24
_callee$	                      @	createResolveElements.js?6f65:166
tryCatch	                      @	runtime.js?1aab:63
invoke	                        @	runtime.js?1aab:337
prototype.(anonymous function)	@	runtime.js?1aab:96
resume	                        @	asyncGenerator.js?4df4:48
(anonymous function)	          @	asyncGenerator.js?4df4:53

[ohardy]

Oki, i make a mistake in my example, it's look like that:

<Route
        getComponent={getLayout}
        queries={LayoutQueries}
        prepareParams={prepareParamsLayout}
        render={renderLayout}
      >
        <Route
          Component={Content}
          queries={ContentQueries}
          prepareParams={prepareParamsContent}
          render={renderContent}
        />
      </Route>

I use getComponent for Layout that return a promise, do a direct query to GraphQL server and resolve to component. getComponent is resolved and return a valid Component and after i got null Component in render call. Hope it's help

[taion]

That's the expected behavior – we don't continuously rerender to avoid layout thrashing; we only render once with the data initially available, then again at the end once everything is fetched.

[ohardy]

Just to confirm that if i don't return a Promise in getComponent, everything is OK. Just in case, it will be really cool to recall render just when getComponent is resolved (Component pass from null to non null), so we can load part of the UI while loading queries :)