Flow Router Fußzeile blinkt vor dem Laden von Daten

Question

Ich lade ein Raster von Daten mit Flow-Router, aber wenn ich die Seite anzeigen, blinkt die Fußzeile immer nach oben, bevor die Daten geladen werden. Was ist der beste Weg, um das zu beheben? Hier

ist die Route:

AdminRoutes.route('/dashboard', { 
    name: 'adminDashboard', 
    action() { 
    BlazeLayout.render('AppLayout', {page: 'AdminDashboard'}); 
    } 
}); 

Hier ist die js-Datei:

import { Template } from 'meteor/templating' 
import Stores from '../../../../api/stores/stores.js' 

import './AdminDashboard.html' 

Template.AdminDashboard.onCreated(function() { 
    var self = this; 
    self.autorun(function() { 
    self.subscribe('stores.names.links'); 
    }); 
}); 

Template.AdminDashboard.helpers({ 
    stores: function() { 
    return Stores.find(); 
    } 
}); 

Hier ist die HTML-Layout-Datei:

<template name='AppLayout'> 

    {{#if Template.subscriptionsReady}} 

    {{> Header }} 

    {{> Template.dynamic template=page}} 

    {{> Footer }} 

    {{/if}} 

</template> 

Hier ist das Armaturenbrett HTML-Datei:

<template name='AdminDashboard'> 
    <div class='admin-dashboard-page'> 

    <section class='stores-grid'> 
     {{#each stores}} 
     <div class='store'> 
      <h2 class='store-name'>{{name}}</h2> 
      <a href='/admin/dashboard/{{link}}' class='store-button'>Edit</a> 
     </div> 
     {{/each}} 
    </section> 

    </div> 
</template> 

Answer 1

Ich würde versuchen, die Fußzeile nach .stores-grid lädt anzuzeigen. Erstellen Sie eine reactiveVar mit einem Handler, der auf true festgelegt ist, wenn Ihre Daten geladen werden, und geben Sie ihren Wert auf einem Helfer zurück, dann umschließen Sie die Fußzeile in einem if-Block für Ihre Vorlage.

es so etwas wie die folgende sein würde ...

zunächst eine reactiveVar mit einem Wert von falschen erstellen:

Template.AdminDashboard.onCreated(function() { 
    this.isDataLoaded = new ReactiveVar(false); 
    var self = this; 
    self.autorun(function() { 
    self.subscribe('stores.names.links'); 
    }); 
}); 

den Wert auf true gesetzt, wenn die Sammlung geladen wird:

Template.AdminDashboard.helpers({ 
    stores: function() { 
    let data = Stores.find() 
    if(data) { 
     Template.Instance().isDataLoaded.set(true) 
     } 
    return data ; 
    }, 

    dataLoaded: function() { 
    return Template.Instance().isDataLoaded.get(); 
    } 
}); 

Schließlich, wickeln Sie Ihre Fußzeile, so dass es nur nach dem Laden von Daten angezeigt wird:

<template name='AppLayout'> 
    {{#if Template.subscriptionsReady}} 
    {{> Header }} 
    {{> Template.dynamic template=page}} 
    {{#if dataLoaded}} 
     {{> Footer }} 
    {{/if}} 
    {{/if}} 
</template> 

Answer 2

Eine einfache Lösung wäre, eine Mindesthöhe auf div zu setzen, in die der Inhalt geladen wird, indem die Fußzeile gedrückt wird, während der Inhalt geladen wird. Dies kann oder kann nicht für Sie funktionieren, abhängig von der erwarteten Höhe Ihres Inhalts.

Sie können auch einen Ladebildschirm/eine Animation installieren, um die Fußzeile auszublenden, während die Daten geladen werden.