Data loading example

[Paul Stocks]

It would be very helpful to have a simple example of the correct way to load data.
I was able to use react-komposer and everything was fine until I tried to add an ionShowLoading
Although what I did works ... the console show react to be very unhappy.
warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount.

Here is what my container looks like.

import { composeWithTracker } from 'react-komposer';
import { Data } from '/lib/imports/collection';
import  About  from '../components/about.jsx';
import theApp from '/client/imports/theApp';

import { Meteor } from 'meteor/meteor';
var showing = false;

const composer = (props, onReady) => {
  const handleData = Meteor.subscribe('theData');
  if (handleData.ready()) {
    const data = Data.find({}).fetch();
    if(showing){
       theApp.ionShowLoading(false)
       showing = false;
    }
    onReady(null, { props, data });
  } else {
      if(!showing){
        theApp.ionShowLoading(true, {
                                backdrop:true,
                                delay:0,
                                customTemplate:null
                                });
       showing = true;
  }
  }
};

export default composeWithTracker(composer)(About);

[Paul Stocks]

I got this working by using using the IonLoading component directly.
Here is the 'container' ... buyer beware I'm new to this framework!!!

import React from 'react';
import { composeWithTracker } from 'react-komposer';
import { Data } from '/lib/imports/collection';
import  About  from '../components/about.jsx';
import {IonLoading} from 'reactionic'
import { Meteor } from 'meteor/meteor';

const MyLoading = () => (<IonLoading show={true} ></IonLoading>);

const composer = (props, onReady) => {
  const handleData = Meteor.subscribe('theData');
  if (handleData.ready()) {
    const data = Data.find({}).fetch();
    onReady(null, { props, data });
  } 
}

export default composeWithTracker(composer, MyLoading)(About);

[Mark Pors]

@stocksp I haven't tried the container way of doing it yet, but this works for us:

  mixins: [ReactMeteorData],
  getMeteorData() {
    let handle = Meteor.subscribe('profile');
    let data = UserProfile.findOne({});
    return {
      loading: !handle.ready(),
      profile: data
    };
  },

And then in the render() method:

    if (this.data.loading) {
      if (this.props.platform.isAndroid) {
        loading = <IonSpinner icon="android" />;
      } else {
        loading = <IonSpinner icon="ios" />;
      }
   } else {
     // return component with provided data
  }

and then let the component return loading

[Paul Stocks]

Hummm ... well, <IonSpinner icon="ios" /> doesn't show anything for react-komposer. I'm not married to react-komposer I'm just trying to avoid the mixin --- I see the folks at studiointeract have a tracker-component that looks easy to use, I'll give that a whirl when I have a few minutes.
thanks for your help!