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.

Sign up for GitHub

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

Jump to bottom

[Content management] Table list flashes table interface when empty #159507

Closed
drewdaemon opened this issue Jun 12, 2023 · 5 comments · Fixed by #160650
Closed

[Content management] Table list flashes table interface when empty #159507

drewdaemon opened this issue Jun 12, 2023 · 5 comments · Fixed by #160650
Assignees
@sebelga
Labels
bug Fixes for quality problems that affect the customer experience Component:TableListView Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@drewdaemon
Copy link
Contributor

Kibana version:
Main

Describe the bug:
When a TableListView is rendered and no items are available, the empty prompt is briefly replaced with the loading table interface.

Screen.Recording.2023-06-12.at.12.10.03.PM.mov
@drewdaemon drewdaemon added bug Fixes for quality problems that affect the customer experience Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) Component:TableListView labels Jun 12, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@drewdaemon drewdaemon mentioned this issue Jun 12, 2023
Merged
18 tasks
@drewdaemon
Copy link
Contributor Author

drewdaemon commented Jun 26, 2023 •
edited
Loading

Looks like this issue was at the root of #148557

Also, it seems that this flashing problem was there before #157988 but got worse with my addition of this useEffect hook since it fires yet another fetchItems request.

Removing that new useEffect and adding refreshListBouncer to the dependencies array of the preexisting useDebounce is a decent way to get back to the less-bad flashing that was there prior to #157988.

But, a true fix feels more difficult. Maybe something like allowing in-flight fetchItems requests to be cancelled when a new request is made so that a displayed empty state isn't interrupted by a parallel request.

@sebelga
Copy link
Contributor

sebelga commented Jun 27, 2023

That useEffect looks "dangerous" indeed. We need to check one by one all the dependencies to validate that it does not create an infinite loop or the problem here found. I don't recall why it was added, can you remind me?

@sebelga
Copy link
Contributor

sebelga commented Jun 27, 2023

I keep thinking that the TableListView is a table component and that any layout around it should not affect its internal. If it appears in a modal, a flyout or under tabs should be irrelevant to the table code.

This was referenced Jun 27, 2023
Closed
Merged
@drewdaemon
Copy link
Contributor Author

That useEffect looks "dangerous" indeed. We need to check one by one all the dependencies to validate that it does not create an infinite loop or the problem here found. I don't recall why it was added, can you remind me?

It does seem to exacerbate this problem by kicking off a second initial fetchItems request. I added it so that the parent component could signal to the TableListViewTable when it is time to refresh the list.

I keep thinking that the TableListView is a table component and that any layout around it should not affect its internal. If it appears in a modal, a flyout or under tabs should be irrelevant to the table code.

Yeah, I think this is how it is today. This behavior is present no matter where the TableListViewTable is rendered (for example, the flaky test is on the dashboards page which doesn't use tabs).

nreese added a commit that referenced this issue Jun 29, 2023
@nreese @kibanamachine
[Content management] fix table list flashes table interface when empty (
9f73f94 
#160650)

Closes #159507
Closes #148557

Flaky test runner
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2508

### Test instructions
* Install sample web logs data set
* Delete dashboard that ships with sample data set
* switch to another app, like visualize
* Use debugger tools to throttle network connection to "slow 3g"
* Open dashboard application again
* Verify empty table view is never displayed and there is no flickering
between views.

---------

Co-authored-by: Kibana Machine <[email protected]>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Jun 29, 2023
@nreese
[Content management] fix table list flashes table interface when empty (
1190ba9 
elastic#160650)

Closes elastic#159507
Closes elastic#148557

Flaky test runner
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2508

### Test instructions
* Install sample web logs data set
* Delete dashboard that ships with sample data set
* switch to another app, like visualize
* Use debugger tools to throttle network connection to "slow 3g"
* Open dashboard application again
* Verify empty table view is never displayed and there is no flickering
between views.

---------

Co-authored-by: Kibana Machine <[email protected]>
(cherry picked from commit 9f73f94)
kibanamachine referenced this issue Jun 29, 2023
@kibanamachine @nreese
[8.9] [Content management] fix table list flashes table interface whe…
dc459a5 
…n empty (#160650) (#160893)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Content management] fix table list flashes table interface when
empty (#160650)](#160650)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-06-29T13:55:16Z","message":"[Content
management] fix table list flashes table interface when empty
(#160650)\n\nCloses
https://github.com/elastic/kibana/issues/159507\r\nCloses
https://github.com/elastic/kibana/issues/148557\r\n\r\nFlaky test
runner\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2508\r\n\r\n###
Test instructions\r\n* Install sample web logs data set\r\n* Delete
dashboard that ships with sample data set\r\n* switch to another app,
like visualize\r\n* Use debugger tools to throttle network connection to
\"slow 3g\"\r\n* Open dashboard application again\r\n* Verify empty
table view is never displayed and there is no flickering\r\nbetween
views.\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"9f73f9479c1ff77fbada8305e618931b57d65796","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","Team:SharedUX","v8.9.0","v8.10.0"],"number":160650,"url":"https://github.com/elastic/kibana/pull/160650","mergeCommit":{"message":"[Content
management] fix table list flashes table interface when empty
(#160650)\n\nCloses
https://github.com/elastic/kibana/issues/159507\r\nCloses
https://github.com/elastic/kibana/issues/148557\r\n\r\nFlaky test
runner\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2508\r\n\r\n###
Test instructions\r\n* Install sample web logs data set\r\n* Delete
dashboard that ships with sample data set\r\n* switch to another app,
like visualize\r\n* Use debugger tools to throttle network connection to
\"slow 3g\"\r\n* Open dashboard application again\r\n* Verify empty
table view is never displayed and there is no flickering\r\nbetween
views.\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"9f73f9479c1ff77fbada8305e618931b57d65796"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/160650","number":160650,"mergeCommit":{"message":"[Content
management] fix table list flashes table interface when empty
(#160650)\n\nCloses
https://github.com/elastic/kibana/issues/159507\r\nCloses
https://github.com/elastic/kibana/issues/148557\r\n\r\nFlaky test
runner\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2508\r\n\r\n###
Test instructions\r\n* Install sample web logs data set\r\n* Delete
dashboard that ships with sample data set\r\n* switch to another app,
like visualize\r\n* Use debugger tools to throttle network connection to
\"slow 3g\"\r\n* Open dashboard application again\r\n* Verify empty
table view is never displayed and there is no flickering\r\nbetween
views.\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"9f73f9479c1ff77fbada8305e618931b57d65796"}}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>
This was referenced Jul 17, 2023
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sebelga sebelga

Labels
bug Fixes for quality problems that affect the customer experience Component:TableListView Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Content management] fix table list flashes table interface when empty nreese/kibana
3 participants
@drewdaemon @sebelga @elasticmachine