question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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_20210203_185748

Screenshot after changed passages order twice: Screenshot_20210203_185841

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:16

github_iconTop GitHub Comments

1reaction
erumoicocommented, Mar 25, 2021

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. 🙂

0reactions
tconklingcommented, Mar 24, 2021

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.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

UI best practices for loading, error, and empty states in React
In this article, we'll cover the best practices to use in client-side rendered React apps when handling loading, error, and empty state.
Read more >
ngrx Load data from server only if the store is empty
This data is loaded upon the ngOnInit() of these components but I'd like to load them only if it's the very first time...
Read more >
NX never load component with empty reference set
Hi! I am creating an assembly where several sub-components depend on the same geometry. However, that geometry is not a component itself but ......
Read more >
How To Handle Async Data Loading, Lazy Loading, and Code ...
React has a special component called Suspense that will display placeholders while the browser is loading your new component.
Read more >
Empty state Usage - ServiceNow Developers
Types and Usage. Learn about the empty state component and find out how to use it in your design. ... In this example,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found