Refactor "loading" state of DAGs view to remove visual jank - #11725
Merged
Conversation
kaxil
approved these changes
Oct 21, 2020
mik-laj
approved these changes
Oct 21, 2020
michalmisiewicz
pushed a commit
to michalmisiewicz/airflow
that referenced
this pull request
Oct 30, 2020
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This fixes the visual "jank" seen when loading the DAGs (home) view. Most of the unwanted shifting was being caused by the loading GIF images being shown briefly in the table header. This caused table cells to shift vertically and horizontally. The implementation was also a bit inconsistent in that it showed a loading state in two column headers ("Recent Tasks", "DAG Runs") and then in the individual cells of another ("Last Run"). I've remedied that by using the same placement for all three.
I've moved the new "loading dots" pattern (CSS only, no images) introduced in #11534 to a macro file so that it could be repurposed here as well.
Before:
After:
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.