node.js - Jade/Node.js: Tumblr からの投稿の読み込み中に読み込みメッセージを表示する

Question

Tumblr から投稿を読み込んで表示する Node.js アプリケーションがあります。
サーバーがクライアントからリクエストを受け取ると、サーバーは Tumblr から最新の 5 つの投稿を取得して Jade に渡します。Jade はテンプレートをレンダリングし、HTML に変換してからすべてをクライアントに渡します。

もちろん、Tumblr からの投稿の読み込みは非同期であるため、クライアントが最初にページにアクセスしたとき、posts オブジェクトは空になります (Tumblr から投稿を受信する前にリクエストがレンダリングされて送信されるため)。ただし、ページを更新すると、posts オブジェクトは空ではなくなり、Tumblr からの投稿でページがいっぱいになります。

現在、適切な Web ページと同様に、渡された posts オブジェクトが null または空の場合、「Loading posts from Tumblr」と表示されます。ただし、ポストフェッチ メソッドは非同期であるため、投稿を表示するにはページを更新する必要があります。ただし、JavaScript を使用してページを更新することは避けたいので、Tumblr から取得し、更新せずにページを更新しているときに「Tumblr から投稿を読み込んでいます」と表示して、ページを動的に読み込むにはどうすればよいですか?

以下に、関連するコード スニペットをいくつか示します。

フェッチャー後のメソッド:

function getPosts() {
    var self = this;
    var posts = {};
    blog.text({limit: 5}, function(error, response) {
        if (error) {
           throw new Error(error);
        }

        self.posts = response.posts;
    });

    if (main.debug) console.log(posts);
    return this.posts;
}

リクエスト ハンドラ:

app.get('/', function(req, res) {
    res.render('index', {
        title: "My Site",
        posts: getPosts()
    });
});

投稿を表示する Jade ブロック拡張機能:

if posts == null
  .postContainer#nullPosts
    h1 Still loading!
    p
      | You caught us at a bad time: we're still loading posts from
      | Tumblr. Try refreshing the page in a few seconds.
    p#emote Sorry! (>u///u<)
else
  for post in posts
    .postContainer
      h1
        a(title='View on Tumblr', target='_blank', href='#{post.post_url}')
          if post.title == ""
            = post.timestamp
          else
            = post.title
      p !{post.body}
      p.tags
        for tag in post.tags
          = "#" + tag + " "