フロールータフッターがデータロード前に先頭に点滅

Question

フロールータでデータグリッドをロードしていますが、ページを表示すると、データがロードされる前にフッターが常に先頭に点滅します。これを解決する最善の方法は何ですか？ここで

は、ルートである：ここでは

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

は、JSファイルです：

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(); 
    } 
}); 

ここでは、HTMLレイアウトファイルされる：

<template name='AppLayout'> 

    {{#if Template.subscriptionsReady}} 

    {{> Header }} 

    {{> Template.dynamic template=page}} 

    {{> Footer }} 

    {{/if}} 

</template> 

ここでは、ダッシュボードのhtmlファイルです。

<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

私はフッタの後に.stores-gridロードを表示しようとします。データがロードされたときにtrueに設定されたハンドラでreactVarを作成し、その値をヘルパーに返し、テンプレートのifブロックにフッターをラップします。

それは

まず偽の値を持つreactiveVar作成...次のようになります。コレクションがロードされたとき

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

値を設定trueた：

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(); 
    } 
}); 

最後に、データがロードされた後にのみ表示されるようにフッターをラップします。

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

Answer 2

コンテンツをロードするときにdivの最小高さを設定し、コンテンツが読み込まれている間にフッターを押し下げるのが簡単な修正です。予想されるコンテンツの高さに応じて、これはうまく動作しない場合があります。

また、読み込み中にフッターを非表示にするための読み込み画面/アニメーションをインストールすることもできます。