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

Fix control UI loading state #29080

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
Open

Fix control UI loading state #29080

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d327ba
Refactor ArgsTable Skeleton component to use a div instead of a fragment
Sep 9, 2024
d9e128e
Refactor Skeleton component
Sep 10, 2024
d1ac898
Rename const
Sep 10, 2024
1f2f3df
Merge branch 'next' into fix-control-ui-loading-state
kasperpeulen Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 27 additions & 61 deletions code/lib/blocks/src/components/ArgsTable/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,66 +33,32 @@ const SkeletonText = styled.div<{ width?: number | string; height?: number }>(

const columnWidth = [2, 4, 2, 2];

/**
* The structure of the Skeleton
*
* - First dimension: Rows
* - Second dimension: Columns
* - Third dimension: SkeletonText widths
*/
const contentStructure = [
[[60], [30], [60], [60]],
[[60], [80, 30], [60], [60]],
[[60], [80, 30], [60], [60]],
[[60], [80, 30], [60], [60]],
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider using a more descriptive name for this constant, such as skeletonStructure or skeletonLayout

];

export const Skeleton: FC = () => (
<>
<Row>
<Column numColumn={columnWidth[0]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[1]}>
<SkeletonText width="30%" />
</Column>
<Column numColumn={columnWidth[2]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[3]}>
<SkeletonText width="60%" />
</Column>
</Row>
<Row>
<Column numColumn={columnWidth[0]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[1]}>
<SkeletonText width="80%" />
<SkeletonText width="30%" />
</Column>
<Column numColumn={columnWidth[2]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[3]}>
<SkeletonText width="60%" />
</Column>
</Row>
<Row>
<Column numColumn={columnWidth[0]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[1]}>
<SkeletonText width="80%" />
<SkeletonText width="30%" />
</Column>
<Column numColumn={columnWidth[2]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[3]}>
<SkeletonText width="60%" />
</Column>
</Row>
<Row>
<Column numColumn={columnWidth[0]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[1]}>
<SkeletonText width="80%" />
<SkeletonText width="30%" />
</Column>
<Column numColumn={columnWidth[2]}>
<SkeletonText width="60%" />
</Column>
<Column numColumn={columnWidth[3]}>
<SkeletonText width="60%" />
</Column>
</Row>
</>
<div>
{contentStructure.map((row, i) => (
<Row key={i}>
{row.map((col, j) => (
<Column key={j} numColumn={columnWidth[j]}>
{col.map((width, k) => (
<SkeletonText key={k} width={width} />
))}
</Column>
))}
</Row>
))}
</div>
);
Loading