microsoft / microsoft/pxt

AssetCardList: Flash occurring in editor when switching focus between windows

Open
#8,274 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
641
Avg merge
12h 4m
Merged PRs (30d)
57

Description

https://github.com/microsoft/pxt/blob/d0ec5d92f120492142330e264cff57ba5d5cb364/webapp/src/components/assetEditor/assetCardList.tsx

The Asset Card List appears to be (causing or participating in?) a major flash of the editor whenever a window resize message is happening.

Recommend using react state variable and changing the state on the AssetEditor component instead of requesting an animation frame. This is more typically how you request a rerender?

I have tabbed away, then tabbed back and the thing running while the screen is black is this:

image
image

Contributor guide

Open the contributing guide

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 webapp/src/components/assetEditor/assetCardList.tsx and inspect how window resize messages trigger animation frames or rerenders. Reproduce the flash by switching focus between windows while the editor is open. Done means the editor no longer visibly flashes during the resize or focus transition.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.