[SOLVED] How to show a spinner while load dashboard?

help
1

Hello to the entire meteor community, this time I want to ask:
how can I show a spinner in meteor or a loading…?
I want to do it in the simplest way, since I am not a meteor expert
Annex some examples:

when log in , while dashboard template is ready, show loading… template.
when dashboard ready show dashboard

I read about Flowrouter.subsReady but I don’t know how to use, The official documentation does not give many details.
I have installed sasha:spin package, but I still don’t know how to display it properly while loading the template dashboard.
I’m using of original kadira flow router and blaze, Is there a way to do this with blaze?

Thanks in advance.!

1 Like
2

I would suggest trying dynamic imports with Blaze and using async/await. I have not done this in Blaze so I don’t have any code to share but only a suggestion.

3

This is exactly the problem I am facing right now. I will do some tests and return here.

4

How does your code determine if the dashboard is ready? Is it a subscription? Anyways, you can accomplish this with any reactive data source. If you upgrade from kadira:flowrouter to ostrio:flow-router-extra you can also use the whileWaiting hook for a route

<template name="dashboard_template">
 {{#if ready}}
  {{>dashboard}}
 {{else}}
  {{>spinner}}
 {{/if}}
</template>

Template.dashboard_template.onCreated(function(){
 const instance = this;
 instance.ready = new ReactiveVar(false);
 // instead of this you can also you Template.subscriptionsReady in the template
 instance.subscribe('dashboard', function(){
  instance.ready.set(true);
 });
});
Template.dashboard_template.helpers({
 ready(){
  return Template.instance().ready.get();
 }
});
1 Like
5

I use FlowRouter.subsReady over here - https://github.com/dmarkrollins/kwote/blob/83ebfa9872504b41c76422b2747a9cc85f7c057f/client/authors/authorEdit.js

And you can see how I’ve used the isReady helper in the template code here - https://github.com/dmarkrollins/kwote/blob/master/client/authors/authorEdit.html

Hope that helps

6

Blaze also has the Template.subscriptionsReady helper, so you don’t need to add ReactiveVar's to your instance.
That means @jamgold’s example would look like this:

<template name="dashboard_template">
{{#if Template.subscriptionsReady}}
 {{>dashboard}}
{{else}}
 {{>spinner}}
{{/if}}
</template>

Template.dashboard_template.onCreated(function(){
 this.subscribe('dashboard');
});
1 Like
7

thank you all for answering me,
@jamgold thanks to your example I managed to get a way to show the spinner, in fact similar to the example of @coagmano
testing the solition, I realized that the visualization is very fast, so much that the spinner is not appreciated as it is due, i try with Meteor.setTime but no function correctly.
my code at present is similary to the @coagmano example, the other question I have is: ¿how to show spinner for 2000 ms with me current code?
thanks again for your help.!

8

I have a question for you, you are the only one who has responded to FlowRouter.subsReady
so, ¿I just have to add it in the helper like this?

isReady() {
        return FlowRouter.subsReady()
}

no add in routes.js? i have configured a file for routes “routes.js”
Thank you for your response because I wanted to know the use of FlowRouter.subsReady function

9

You can simulate the subscription taking longer by adding this into your publish function on the server

Meteor._sleepForMs(1000);

but be careful to take that out before you put your app into production

10

thanks, i try now :+1:

11

I was assuming you had a FlowRouter route set up something like:

FlowRouter.route('/authors/edit/:id', {
    subscriptions: function (params) {
        this.register('authors', Meteor.subscribe('singleAuthor', params.id))
    },
    action: function () {
        if (!Meteor.userId()) {
            FlowRouter.go('/')
        }
        BlazeLayout.render('layout', { content: 'authorEdit' });
    },
    name: 'kwote-edit'
})

So you have a subscription defined in the route etc.

Now, if alternatively you are doing template based subscriptions then there is a different technique you use to understand if template based subscriptions are ready and you don’t even need a special helper since Template.subscriptionsReady has you covered

Read more on template based subscriptions here: https://guide.meteor.com/data-loading.html#organizing-subscriptions

See example over here: https://github.com/dmarkrollins/kwote/blob/master/client/kwotes/kwotesList.html

1 Like
12

Thank you all for your support, I thank you from the bottom of my heart, I learned a little more weather by your examples and recommendations, I tried all the mentioned examples and some others mentioned in the official meteor guide, I stayed with the method that I understood best, I will mark the issue as resolved because I found the solution to my problem.

I added the package, percolate: momentum for a better visualization of the spinner after a change of page or rather a rendering:

{{#momentum plugin = "fade"}}
{{#if Template.subscriptionsReady}}
  {{> dashboard}}
{{else}}
  {{> spinner}}
{{/ if}}
{{/ momentum}}

the documentation I used: 1 , 2

I hope this works for other people just like me.! :+1:

1 Like