Could I show loading for waiting form "validated-method" return data?

help
1

I would like to show loading for waiting from method return data like this

// Common
orderReportMethod = new ValidatedMethod({
    name: 'orderReportMethod',
    validate: new SimpleSchema({
        branch: {type: [String]}
    }).validator(),
    run({branch}) {
        if (!this.isSimulation) {
            console.log('server run');

            const selector = {
                branchId: {$in: branch}
            };
			
            let data = Order.find(selector);

            return data.fetch();
        }
    }
});

// ----------------------------------
<template name="myTpl">
    {{#if data}}
        <ul>
            {{#each obj in data}}
              ................
            {{/each}}
        </ul>
    {{else}}
        {{> loading}}
    {{/if}}
</template>

// ----------------------------------
Template.myTpl.onCreated(function(){
	this.reportCollection = Mongo.Collection(mull);
});

Template.myTpl.helpers({
	data(){
        const instance = Template.instance();
        let collection = instance.reportCollection;

        // Call the Method
        orderReportMethod.call({
            branch: ['001'],
        }, (err, res) => {
            if (err) {
                console.log(err)
            } else {
                // Remove before insert
                collection.remove({});

                res.forEach((doc)=> {
                    collection.insert(doc);
                });
            }
        });

        return collection.find();
    }
});

Please help me.

2

Maybe you should do the call promise so that it will allow you to do something when the result returns. See https://atmospherejs.com/mdg/validated-method. There is a call promise package extension noted in the Community Mixins section.

So before the method start the loader. Then after you get the result in the .then stop the loader.

3

Thanks for your reply.
So I could use didericis:callpromise-mixin, but I don’t understand how to use.
Could example for me?

4 
//make your loading element in your loading template visible maybe with jquery
orderReportMethod.callPromise({
    val: 'hi'
}).then(function(result){
    //result comes in here; so hide the loading element here
}).catch(function(err){
    console.log(err);
});
5

So I could return the value on client

data(){
    let result = orderReportMethod.callPromise({
        val: 'hi'
    }).then(function(result){
        // set state for loading = false
        return result;
    }).catch(function(err){
        console.log(err);
    });

   return result;
}
6

The result will only come in the .then clause.

7

I try use local collection

genTpl.onCreated(function () {
    this.reportCollection = new Mongo.Collection(null);
    this.state('loadingData', false);
});

genTpl.helpers({
        data(){
            const instance = Template.instance();
            let collection = instance.reportCollection;

            instance.state('loadingData', true);
            orderReportMethod.callPromise({
                 branch: {type: [String]}
            }).then(function (result) {
                // Remove before insert
                collection.remove({});

                result.forEach((doc)=> {
                    collection.insert(doc);
                });
                instance.state('loadingData', false);
            }).catch(function (err) {
                console.log(err);
            });
            let getData = collection.find();

            console.log('run...');

            return getData;
        }
});

        <template name="genTpl">
        {{#if loadingData}}
            {{> loading}}
                {{else}}
            <ul>
                {{#each obj in data}}
                    <li>{{obj._id}} | {{obj.total}}</li>
                {{/each}}
            </ul>
               {{/if}}
        </template>

But still don’t work.

8

Not sure what you are trying to do. But from your code it does look like you don’t need to call a method. The call promise will let you do something at return of the result from the method. But looks like you only need to publish and subscribe & show 'Loading…" while your data is fetched from the server.

if (Meteor.isClient) {
     Template.genTpl.onCreated(function () {
        var self = this;
        self.autorun(function() {
           self.subscribe('orders');  
        });      
     });

     Template.genTpl.helpers({
        data: function () {
           let branch = ['001'];
           let showOrders = Orders.find({branchId: {$in: branch}}).fetch();
           return showOrders; 
        } 
     });
}

let Orders = new Mongo.Collection("orders");

if (Meteor.isServer) {
  Meteor.startup(function () {
    if (Orders.find().count() === 0) {
      Orders.insert({total:'001', branchId:'001'});
      Orders.insert({total:'002', branchId:'002'});
      Orders.insert({total:'003', branchId:'003'});
      Orders.insert({total:'004', branchId:'004'});
    }
 });
 Meteor.publish("orders", function () {
    return Orders.find();
 });
}

<body>
  <h1>Show Orders</h1>
  {{> genTpl}}
</body>

<template name="loading">
  <span>Loading...</span>
</template>

<template name="genTpl">
  {{#if Template.subscriptionsReady}}
     {{#each obj in data}}
        <li>{{obj._id}} | {{obj.total}} | {{obj.branchId}}</li>
      {{/each}}
  {{else}}
     {{ > loading}}
  {{/if}}
</template>
9

Thanks again for your helping.
I understand about use pub/sub.
But my case is report generation, so I do anything with multiple collection and then pass it to array of object and return to client. So I can’t use pub/sub.
Have any solution for waiting this?

10

Do you have the code, method, and client collection all working without showing the loader?