【Bubble】ページ読込み完了まで、ロード中アニメーションを流す方法

Webページを表示する時、Bubbleで構築したそのままでは、読み込んだ情報から順に表示されていきます。

まずテキスト、次にボタン、最後にデータ量の大きな画像…と。
これではやや不格好ですね。

情報が全て読み込まれてから、同時にバン！と表示する。
そして読込み中は、ロード中と分かるようにアニメーションを流す。

今回はその方法を解説します。

Page loaded（entire）を活用

WorkflowやConditionalの条件式に、Page loaded（entire）があります。

これは「ページ全体が読込み完了したら」という意味です。

これを使って、次のように設定します。

ページ全体をグループ化（Group TopPage）し、Conditionalを設定します。

「ページ全体の読込みが未完了ならば、Group TopPageを非表示にする」
という設定です。

読込みが完了すれば、この条件は当てはまらなくなるので、Group TopPageは表示されます。

ロード中アニメーションを追加

ここまでの設定では、非表示の間は画面が真っ白です。
これでは「ページが重い」「バグっている」と思われてしまいます。

そこで、ロード中アニメーションを追加します。

アニメーションはプラグインで「Load」などと調べるといくつも出てきます。
また、任意のGIFファイルを設置することも可能です。

今回は下記プラグインを使用します。

Animated Loaders
https://bubble.io/plugin/animated-loaders-1553729425930x287123392710311940

いくつかアニメーションのエレメントが追加されました。
好きなものをページの真ん中に配置します。

注意点として、先ほどのグループに入れてはいけません。
一緒に非表示になってしまうからです。
画像のElements treeを見ての通り、グループと分けて配置します。

これでプレビューすると、ロード中アニメーションが動いてる後に、ページが表示されたと思います！

まとめ

今回の題材は細かい部分ですが、ユーザーの最初の印象が大きく変わる部分になります。

応用してWorkflowに設定すれば、アニメーションでページを表示することも可能です。

より見た目の美しいWebサイトに仕上げましょう！