React/Mantra delay component render until data is loaded


#1

Hey,

So when you click on a ‘details’ link in my app, you see a version of the previously rendered instance of that component, for about 0.1-0.5 seconds, before it updates to the correct content.

Is there a simple way in mantra/react to stop this happening? My container is this:

import {useDeps, composeAll, composeWithTracker} from 'mantra-core';

import Details from '../components/details.jsx';

export const composer = ({context, Id}, onData) => {
  const { Meteor, Collections } = context();

  if (Meteor.subscribe('details.single', Number(Id)).ready()) {
    const selector = {};
    const options = {};

    const data = Collections.Details.find(selector, options).fetch();

    onData(null, {
      data: data[0]
    });

  } else {
    onData();
  }
};

export const depsMapper = (context, actions) => ({
  context: () => context
});

export default composeAll(
  composeWithTracker(composer),
  useDeps(depsMapper)
)(Details);

Thanks!