Skip to content

[Web] Unified Resources: Add skeleton loader to list view#34381

Merged
rudream merged 1 commit intomasterfrom
yassine/skeleton-loader
Nov 10, 2023
Merged

[Web] Unified Resources: Add skeleton loader to list view#34381
rudream merged 1 commit intomasterfrom
yassine/skeleton-loader

Conversation

@rudream
Copy link
Copy Markdown
Contributor

@rudream rudream commented Nov 9, 2023

Purpose

Based on #34203

Adds a skeleton loader for the loading state in the unified resources list view.

Note: I also made a tweak to the colors we use in ShimmerBox.tsx, currently it looks great in dark theme but in light theme I thought the contrast was too low and it was hard to see the effect (comparison below).

Will address conflicts and merge once #34384 is merged.

Demo

skeletonloader-dark.mov
skeletonloader-light.mov

Old ShimmerBox in light theme:

old-lighttheme.mov

@rudream rudream requested a review from avatus November 9, 2023 10:05
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 9, 2023

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

@github-actions github-actions Bot requested a review from ibeckermayer November 9, 2023 10:06
@rudream rudream added backport/branch/v14 no-changelog Indicates that a PR does not require a changelog entry labels Nov 9, 2023
Copy link
Copy Markdown
Contributor

@avatus avatus left a comment

Choose a reason for hiding this comment

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

Check this recent PR that changes the way we setTimeout for the loading skeletons. I think everything in your PR is fine, but we should update it when this other PR goes in to follow the same

Comment thread web/packages/shared/components/UnifiedResources/CardsView/LoadingCard.tsx Outdated
Copy link
Copy Markdown
Contributor

@gzdunek gzdunek 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, I will take another look today after we resolve conflicts.

Comment thread web/packages/shared/components/UnifiedResources/ListView/LoadingListItem.tsx Outdated
Comment thread web/packages/shared/components/UnifiedResources/types.ts Outdated
Comment thread web/packages/shared/components/UnifiedResources/CardsView/LoadingCard.tsx Outdated
Comment thread web/packages/shared/components/UnifiedResources/ListView/ListView.tsx Outdated
@rudream rudream force-pushed the yassine/unified-list branch 2 times, most recently from af5e440 to 1ccb682 Compare November 10, 2023 17:08
@rudream rudream force-pushed the yassine/skeleton-loader branch 2 times, most recently from 6567518 to 46310fb Compare November 10, 2023 17:10
@rudream rudream requested review from avatus and gzdunek November 10, 2023 17:10
@rudream rudream force-pushed the yassine/unified-list branch 6 times, most recently from d0b42dc to 21d6550 Compare November 10, 2023 18:49
@rudream rudream force-pushed the yassine/skeleton-loader branch from 46310fb to ace55d3 Compare November 10, 2023 19:18
Base automatically changed from yassine/unified-list to master November 10, 2023 19:25
@rudream rudream force-pushed the yassine/skeleton-loader branch 2 times, most recently from 6961f2f to 12d3503 Compare November 10, 2023 19:46
@rudream rudream enabled auto-merge November 10, 2023 19:47
@rudream rudream disabled auto-merge November 10, 2023 19:50
@rudream rudream force-pushed the yassine/skeleton-loader branch from 12d3503 to e7313fe Compare November 10, 2023 20:11
@rudream
Copy link
Copy Markdown
Contributor Author

rudream commented Nov 10, 2023

Added e ref update for https://github.com/gravitational/teleport.e/pull/2619 to this PR as well.

@rudream rudream enabled auto-merge November 10, 2023 20:12
@rudream rudream added this pull request to the merge queue Nov 10, 2023
Merged via the queue into master with commit 68f88ea Nov 10, 2023
@rudream rudream deleted the yassine/skeleton-loader branch November 10, 2023 20:37
@public-teleport-github-review-bot
Copy link
Copy Markdown

@rudream See the table below for backport results.

Branch Result
branch/v14 Failed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-changelog Indicates that a PR does not require a changelog entry size/md ui

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants