Resolving some issues around rendering pagination loading on resource list pages #12884
Conversation
codyrancher
changed the title
| &:not(.loading) { | ||
| border-bottom: 1px solid var(--sortable-table-top-divider); | ||
| } | ||
| border-bottom: 1px solid var(--sortable-table-top-divider); |
There was a problem hiding this comment.
We get a flicker without a border momentarily if we keep the .loading negation.
| @@ -374,8 +374,10 @@ export default { | |||
| eventualSearchQuery = this.$route.query?.q; | |||
| } | |||
|
|
|||
| const isLoading = this.loading || false; | |||
There was a problem hiding this comment.
Sometimes loading has a value and that's what we should initiate our state with.
| @@ -512,7 +514,7 @@ export default { | |||
| }, | |||
|
|
|||
| created() { | |||
| this.debouncedRefreshTableData = debounce(this.refreshTableData, 500); | |||
| this.debouncedRefreshTableData = debounce(this.refreshTableData, 500, { leading: true }); | |||
There was a problem hiding this comment.
This forces us to trigger at the beginning of the timer instead of the end which makes the visual for loading appear sooner.
| this.refreshButtonPhase = !res || this.loading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION; | ||
|
|
There was a problem hiding this comment.
This would cause the refresh button to get stuck on page load and refreshButtonPhase expects a phase value not a boolean true or false value.
You'll also notice that we have a manualRefreshLoadingFinished watcher which updates the phase as well so it seems safe to remove.
| @@ -270,7 +270,7 @@ export default { | |||
| v-else | |||
| :schema="schema" | |||
| :rows="rows" | |||
| :alt-loading="canPaginate" | |||
| :alt-loading="canPaginate && !isFirstLoad" | |||
There was a problem hiding this comment.
We really only want alt-loading to happen on manual refresh and when changing pages. It seemed easiest to base this on whether or not it was the first load or not.
Yeah, I'm in favor of waiting until after they're merged. |
Summary
It wasn't readily apparent what the expected behavior was around things like alt-loading and the manual refresh so I did was made sense to me. See the video to see if it's what we want or if adjustments need to be made.
fixes #12748
Occurred changes and/or fixed issues
We no longer flicker the no-rows messaging when first loading one of the server-side pagination pages.
Areas or cases that should be tested
SSP and non-SSP resource list pages.
Screenshot/Video
list-loading.mp4
Checklist