# Pageに表示されているElementのData Sourceが全て読み込まれるまでローディング中のPopupを表示させたい

**URL:** https://www.nocode-faq.com/t/topic/3411
**Category:** bubble
**Tags:** フロントエンド
**Created:** [2023 年 2 月 5 日午後 1:52 UTC](https://www.nocode-faq.com/t/topic/3411 "2023-02-05T13:52:32Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![richtetsuya](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/richtetsuya/32/5163_2.png) [@richtetsuya](https://www.nocode-faq.com/u/richtetsuya)
#### Post date: [2023 年 2 月 5 日午後 1:52 UTC](https://www.nocode-faq.com/t/topic/3411/1 "2023-02-05T13:52:32Z")

</div>

質問失礼致します。

###・前提条件 ・発生している問題・エラーメッセージ ・実装したい機能

Pageに表示されているRepeatingGroupのData Sourceが全て読み込まれるされるまでローディング中のPopupを表示させたいです。

ワークフローはPage is loaded; step1.show popup でローディングのPopupを表示し、  
別のワークフローでPage is loaded(entire); step1. hide popupでローディングpopupを非表示にしています。  
例のエディターは下記です。

> **[Bubble Editor - test221008repeatingheight](https://bubble.io/page?name=index&id=test221008repeatingheight&tab=tabs-1)**
>
> Bubble is the only platform that lets you switch between AI prompting and visual editing to go beyond prototypes and launch real apps — no code required.

例では一瞬でロードが完了してる為か非表示にできていますが、  
RepeatingGroupの条件が複雑なDo search for でImageを取り出すまでに時間がかかり、  
RepeatingGroup内を表示する前にpopupが非表示になってしまいます。

皆様どのように実装されていますでしょうか。

### 補足情報 （調べたURL/参考になりそうな事例）

以前koyamaさんが質問されている投稿は下記です。

> [@page is loaded(entire)がyesにならない](https://www.nocode-faq.com/t/topic/2751/2):
>
> 遅くなりましたpray こちら、ちょうど朝5時からの「朝からBubbleでじょん」でRyoさん＆じょんさんと 3人で検証しました。 結果、おそらくですが新レスポンシブで対応幅が変わってしまったのだと考えます。 結論から言うと、表示したいGroupの（ここでいうGroup A）「Collapse When Hidden」にチェックを入れると改善されるかと思うので試してみてください。 説…

bubble forumでも同様の質問がありましたが、複雑で理解できませんでした。

> **[Page and all elements completely loaded](https://forum.bubble.io/t/page-and-all-elements-completely-loaded/38146)**
>
> One thing about Bubble that has been bothering me pretty much from the start, and that I haven’t found a way around is that when Bubble reports that the page is fully loaded, both elements and repeating groups are not necessarily complete. ...

---

<div class="post-metadata">

### Author: ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)
#### Post date: [2023 年 2 月 6 日午前 7:07 UTC](https://www.nocode-faq.com/t/topic/3411/2 "2023-02-06T07:07:36Z")

</div>

例のエディターに閲覧権限がなかったので、確認することができませんでした。  
読み込まれるまでのローディングでしたら、page loaded(entire) はどうでしょうか。  
読み込まれていない状態 = no  
読み込まれている状態 = yesとなります。

 ![スクリーンショット 2023-02-06 16.06.38](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4f1a0fe2a13d1a34aefcc7de95a95ce37145884c.png)

---

<div class="post-metadata">

### Author: ![richtetsuya](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/richtetsuya/32/5163_2.png) [@richtetsuya](https://www.nocode-faq.com/u/richtetsuya)
#### Post date: [2023 年 2 月 6 日午後 12:15 UTC](https://www.nocode-faq.com/t/topic/3411/3 "2023-02-06T12:15:48Z")

</div>

じょんさん

返信ありがとうございます。  
権限許可しました。申し訳ございませんでした。

page loaded(entire)は上述通り試しましたが、Repeating 内のdataが反映される前にローディングimageが消えてしまいます。

今回のサンプルエディターではデータが軽い為、うまく動作している様に見えます。

---

<div class="post-metadata">

### Author: ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)
#### Post date: [2023 年 2 月 7 日午前 12:04 UTC](https://www.nocode-faq.com/t/topic/3411/4 "2023-02-07T00:04:53Z")

</div>

画像ファイルを20枚保存し検証してみました。  
隠したいGroupに対してConditional page loaded (entire) is "no"を指定  
This element is visible のチェックを外す

> **[Gyazo](https://gyazo.com/924896a8a5c057958f53e464a5ebe632)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

上記を隠している間に表示したいGroupに対して  
Conditional page loaded (entire) is "no"を指定  
This element is visible のチェックを入れる

> **[Gyazo](https://gyazo.com/747eb034d31df55ead548afc9c6e2e6e)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

これで一瞬ですが、表示の切り替えができています。  
反映に時間のかかるデータでお試しください。

> **[Gyazo](https://gyazo.com/cad9edcb6808ee48501907d7d628d5dd)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

---

<div class="post-metadata">

### Author: ![richtetsuya](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/richtetsuya/32/5163_2.png) [@richtetsuya](https://www.nocode-faq.com/u/richtetsuya)
#### Post date: [2023 年 2 月 8 日午後 12:51 UTC](https://www.nocode-faq.com/t/topic/3411/5 "2023-02-08T12:51:26Z")

</div>

返信遅くなり申し訳ございません。

実際の開発エディターでテストしてみましたが、想定している挙動になりません。

ローディングアイコンの設定  
 ![ローディングアイコン設定](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/271c148724df8dea705e32755f4d2c246f1a3428.png)

グループの設定

 ![グループ全体の設定](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d49bb2064435f975840a55ceeeaa485cf73c37bc.png)

実際の挙動  
(Do searchでデータがある場合visibleにする設定のinputがload完了後,visibleになるまで時間がかかります。ページごとPDF化をするページなので全て表示できるようになってからしかPDF化できない仕様にしたいですが、現状だと全て表示される前にもPDF化できてしまいます。)  
 ![](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/09a0c6ea6f0754545b6bb43e07e34e381b9d4095.gif)

---

<div class="post-metadata">

### Author: ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)
#### Post date: [2023 年 2 月 11 日午前 12:30 UTC](https://www.nocode-faq.com/t/topic/3411/6 "2023-02-11T00:30:05Z")

</div>

ドキュメントを調べなおしたところ、非表示のエレメントに関しては適用されないようです。  
Shapeで覆っておいてentire=yesのタイミングで覆っているShapeを非表示にするのはどうでしょうか。

 ![スクリーンショット 2023-02-11 9.27.32](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7b54a37991e19480b11d3b54f6fe40e9c0faae70.png)

---

<div class="post-metadata">

### Author: ![richtetsuya](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/richtetsuya/32/5163_2.png) [@richtetsuya](https://www.nocode-faq.com/u/richtetsuya)
#### Post date: [2023 年 2 月 12 日午前 7:16 UTC](https://www.nocode-faq.com/t/topic/3411/7 "2023-02-12T07:16:12Z")

</div>

ありがとうございます!!  
その方法で実装しようと思います!!  
本当に助かりました！
