Some instances of my component are load as empty when I change their order

Summary

Sometimes it happened to me, that my component did not fully load. In this case, only component’s public/index.html was loaded without anything in <div id="root"></div> tag. I have many instances of my component in my streamlit app. This issue happened when I change order of my components.

Steps to reproduce

1. In some browser (I tried Firefox and Chromium), go to http://pcknot2.fit.vutbr.cz:8502/
2. Click on Submit button
3. Scroll down to Passages: and you will see passages in instances of my component
4. Expand Demo options on the sidebar
5. Under Passages (or under Spans it happens too) switch Descending order checkbox twice with some pause between
6. Now you may see, that some instances of my component are empty. If not, try step 5 again.
7. Close the sidebar or change the window size and then empty instances will fill up. But their height of iframe is static.

Expected behavior:

When I changed order of my component’s instances, all displayed well.

Actual behavior:

When I changed order of my component’s instances, some of them displayed empty and with static height of iframe.

Screenshot before changed order:

Screenshot after changed passages order twice:

Is this a regression?

No

Debug info

• Streamlit version: 0.75.0
• Python version: 3.8.5
• Using Conda 4.9.2
• OS: Linux

Edit: For my component I used TypeScript React and npm 6.4.1 Edit2: streamlit-component-lib@1.1.3

[erumoico]

Hi @tconkling and thank you for creating the pull request. I tried it on my minimal code example and it works. No suspicious messages to the web browser console. I think it’s good. 🙂

[tconkling]

Hey @erumoico - thanks so much for your work tracking this down. I have a PR that fixes the issue here: https://github.com/streamlit/streamlit/pull/3015. It’s a simple change, and it basically mirrors exactly what you did in https://github.com/erumoico/streamlit/commit/b9270195b39cf2342daeb9d9e7e2e3cc0320a3c4 (the additional code is just the pain-in-the-ass test that triggers the scenario and validates that it’s doing the right thing.)