Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

We need to bring back loading states while pages complete rendering #2434

Closed
johngruen opened this issue May 16, 2017 · 4 comments
Closed

We need to bring back loading states while pages complete rendering #2434

johngruen opened this issue May 16, 2017 · 4 comments
Assignees
Milestone

Comments

@johngruen
Copy link
Contributor

There may be some down-the-road workarounds here, but there appear to be several issues related to removing the Loading state as page components get built. To name a few:

  • Colors and icons do not seem to be fetched in time making experiment cards not correctly render color or icon
  • The card button state swaps subsequent to page load for installed experiments
  • The experiment counts getting fetched causes card heights to change
  • the Install CTA button flashes
  • On experiment details page does not reflect the correct state when loaded; state changes after you see the content.

There are a lot of small cuts here but the sum total is that the site w/o loading components has significant jank associated with toggling state that damages the overall experience of the site.
Until we can resolve these conflicts without loaders we should bring them back.

@fzzzy fzzzy self-assigned this May 16, 2017
fzzzy added a commit to fzzzy/testpilot that referenced this issue May 16, 2017
@fzzzy
Copy link

fzzzy commented May 16, 2017

Thanks for such detailed feedback.

@lmorchard
Copy link
Contributor

lmorchard commented May 16, 2017

Colors and icons do not seem to be fetched in time making experiment cards not correctly render color or icon

Peeking at this, and I think this is actually a separate issue. I'm seeing these CSP errors on dev rejecting the background colors & images for experiment cards

screenshot 2017-05-16 15 09 00

And I see this on dev:

screenshot 2017-05-16 15 13 14

lmorchard added a commit to lmorchard/testpilot that referenced this issue May 16, 2017
…ine React styles

- Also inject content-security-policy header in the local dev server

- See also: facebook/react#5878 (comment)

Issue mozilla#2434
@lmorchard
Copy link
Contributor

Just submitted a PR to reproduce my last comment on local dev, and change CSP to allow inline styles because ugh.

lmorchard added a commit to lmorchard/testpilot that referenced this issue May 16, 2017
…ine React styles

- Also inject content-security-policy header in the local dev server

- See also: facebook/react#5878 (comment)

Issue mozilla#2434.
Fixes mozilla#2432.
@lmorchard
Copy link
Contributor

Ah, looks like that was #2432 - which turns out to be CSP related, not time related, and won't be fixed by a loading delay

fzzzy added a commit to fzzzy/testpilot that referenced this issue May 16, 2017
Remove the inline styles on the experiment cards, by creating experiments.css ahead of time from the yaml files
fzzzy added a commit to fzzzy/testpilot that referenced this issue May 16, 2017
Remove the inline styles on the experiment cards, by creating experiments.css ahead of time from the yaml files

Remove the inline styles from the experiment details pages as well.

Remove unsafe-inline from the CSP again.
@ghost ghost modified the milestone: Sprint 25 May 20, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants