Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Improve table and other panel loading states #53459

Merged
merged 4 commits into from
Dec 19, 2019

Conversation

formgeist
Copy link
Contributor

@formgeist formgeist commented Dec 18, 2019

Summary

Our current loading states within components are typically simply displaying a "Loading..." text. I'd like to improve the sense of progress in the individual panels by enabling a loading spinner.

Example of spinner in Trace sample view

bb342d94f645aa5a77b2ea30a7d86c0f

Examples of old loading states

Screenshot 2019-12-19 at 13 15 43

Screenshot 2019-12-19 at 13 14 38

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@formgeist formgeist added WIP Work in progress Team:APM All issues that need APM UI Team support enhancement New value added to drive a business result labels Dec 18, 2019
@formgeist formgeist requested a review from a team as a code owner December 18, 2019 09:07
@formgeist formgeist self-assigned this Dec 18, 2019
@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:apm)

@formgeist formgeist changed the title [APM] Updated loading states to spinner [APM] (WIP) Updated loading states to spinner Dec 18, 2019
@formgeist formgeist added release_note:skip Skip the PR/issue when compiling release notes v7.6.0 labels Dec 18, 2019
@formgeist
Copy link
Contributor Author

@elasticmachine merge upstream

@formgeist
Copy link
Contributor Author

@elasticmachine merge upstream

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@formgeist formgeist changed the title [APM] (WIP) Updated loading states to spinner [APM] Improve table and other panel loading states Dec 19, 2019
@formgeist formgeist removed the WIP Work in progress label Dec 19, 2019
@formgeist
Copy link
Contributor Author

@sqren Took away the WIP labels and updated the description to show examples of improvements. Agree to merge this in? I think it's an improvement over our existing loading states in those places. It's at least a step in the right direction. As a possible next enhancement, we could go for different type of loaders depending on the content. I.e. tables could have the TextContent loader and later on update the chart loaders to feature the bar chart loader.

Copy link
Member

@sorenlouv sorenlouv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

@formgeist formgeist merged commit 990ecda into elastic:master Dec 19, 2019
@formgeist formgeist deleted the design/update-loading-spinner branch December 19, 2019 13:03
formgeist added a commit that referenced this pull request Dec 19, 2019
Updated text loading states to animated spinners.
mbondyra added a commit to mbondyra/kibana that referenced this pull request Dec 19, 2019
…f github.com:mbondyra/kibana into IS-51910_share-lens-change-index-pattern-in-discover

* 'IS-51910_share-lens-change-index-pattern-in-discover' of github.com:mbondyra/kibana:
  [Discover] Remove angular field filter template code (elastic#53513)
  [APM] Improve table and other panel loading states (elastic#53459)
  Security/Spaces - cleanup react warnings (elastic#53287)
  Revert "NP licensing add functional tests (elastic#53002)" (elastic#53577)
  NP licensing add functional tests (elastic#53002)
  fix onLicenseInfoChange callback to be called on update (elastic#53559)
  Document how to extend request handler context (elastic#53271)
@cauemarcondes cauemarcondes self-assigned this Jan 16, 2020
@cauemarcondes
Copy link
Contributor

Test:
Chrome: ✅
IE: ✅
Firefox: ✅
Safari: ✅
Screenshot 2020-01-16 at 13 26 14

@cauemarcondes cauemarcondes added the apm:test-plan-done Pull request that was successfully tested during the test plan label Jan 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
apm:test-plan-done Pull request that was successfully tested during the test plan enhancement New value added to drive a business result release_note:skip Skip the PR/issue when compiling release notes Team:APM All issues that need APM UI Team support v7.6.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants