react-component / react-component/tabs

Iframes doesn't load to completion when in tab with forceRender

Open
#325 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Description

  • I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link

[Edit on CodeSandbox]

Steps to reproduce

Let the first visible chart load fully. Then after a couple seconds, switch to another tab.
You can see that the loader is gone but the chart haven't finished to load.

What is expected?

We expect that the charts (that are embeded in frames) loads fully, even without focus

What is actually happening?

When we switch tabs, the iframes stop loading while in background.

Environment Info
rc tabs 11.7.0
React 16.12.0
System mac/linux
Browser chrome latest

We are using rc-tabs through antdesign, but I managed to reproduce the bug with rc-tabs, so I'm reporting it here also.
Note we did not had this bug with antdesign 3, it appeared in ant 4.

Apparently, it seems to be working with rc-tabs 10, but it may need to be double checked on your side (did not managed to fully integrate rc-tabs 10 in my codesandbox).

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CodeSandbox reproduction in index.js and inspect how rc-tabs 11.7.0 handles forceRender when switching tabs. Compare the behavior with rc-tabs 10 as suggested in the report, then verify in Chrome on macOS or Linux that an embedded chart continues loading to completion while its tab is unfocused.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.