CODEWITHSUNDEEP
meteormeteor-blaze
Andrei C
Andrei C

Reputation: 61

METEOR - Show loader and run methods at specific time

I wanna build a loader circle what goes from 1 to 100% and in the meantime to run some methods.

loader circle

The scenario is:

I was trying something with Meteor.setInterval on onCreated but I'm not sure if it's the right method to do this.

Can someone give me some ideas about how to approach this? Thanks!

Upvotes: 2

Views: 100

Answers (2)

Andrei C
Andrei C

Reputation: 61

This is what i was trying to do:

Template.onboarding.onCreated(function(){
var instance = this;

instance.progress = new ReactiveVar(0);


instance.autorun(function(){
    var loader = {
        maxPercent: 100,
        minPercent: instance.progress.get(),

        start: function(){
            var self = this;

            this.interval = Meteor.setInterval(function(){
                self.minPercent += 1;

                if(self.minPercent >= self.maxPercent) {
                    loader.pause();
                }

                if( self.minPercent == 25) {
                    loader.pause();
                    Meteor.call('runMethodOne', (err,res)=>{
                        if (!err) loader.resume();
                    });
                 }

                if(self.minPercent == 75) {
                    loader.pause();

                    Meteor.call('runMethodTwo', (err,res) =>{
                        if(res) loader.resume();
                    });
                                }
                            }
                    });
                 }

                 instance.progress.set(self.minPercent)

               },50);
           },

           pause: function(){
               Meteor.clearInterval(this.interval);
               delete this.interval;
           },
           resume: function(){
               if(!this.interval) this.start();
           }
       };

       loader.start();
    }
});

});

Upvotes: 0

jordanwillis
jordanwillis

Reputation: 10705

There are several ways you can do this depending on your specific needs and you might even want to use one of the many Reactive Timer packages that are out there.

Here is one working example that only uses the Meteor API (no packages). Note, I did not actually incorporate the loader circle animation since it wasn't specifically part of the question.

Template definition

<template name="loader">
  <h1>Loading...({{loadingPercentage}})</h1>
</template>

Template logic

Template.loader.onCreated(function() {
  // used to update loader circle and triggering method invocation
  this.elapsedTime = new ReactiveVar(0);

  // handle for the timer
  var timerHandle;

  // starts a timer that runs every second that can be paused or stopped later
  const startTimer = () => {
    timerHandle = Meteor.setInterval(() => {
      this.elapsedTime.set(this.elapsedTime.get() + 1);
    }, 1000);
  };

  // pauses/stops the timer
  const pauseTimer = () => {
    Meteor.clearInterval(timerHandle);
  };

  // let's first start our timer
  startTimer();

  // runs every second and triggers methods as needed
  this.autorun(() => {
    const elapsedTime = this.elapsedTime.get();

    // call methods based upon how much time has elapsed
    if (elapsedTime === 5) {
      pauseTimer();

      // call method and restart the timer once it completes
      Meteor.call('methodOne', function(error, result) {
        // do stuff with the result

        startTimer();
      });
    } else if (elapsedTime === 9) {
      pauseTimer();

      // call method and restart the timer once it completes
      Meteor.call('methodOne', function(error, result) {
        // do stuff with the result

        // DO NOT RESTART TIMER!
      });
    }
  });
});

Template.loader.helpers({
  // helper used to show elapsed time on the page
  loadingPercentage: function() {
    return Template.instance().elapsedTime.get();
  },
});

Let me know if you have any questions.

Upvotes: 1

Related Questions