admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Show Data Skeleton Loading (#5328)

Browse Source 
### Description

Show Data Skeleton loading

### Refs

#4460

### Demo

Figma:
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=25429-70096&mode=design&t=VRxtgYCKnJkl2zpt-0

https://jam.dev/c/178878cb-e600-4370-94d5-c8c12c8fe0d5

Fixes #4460

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
This commit is contained in:
gitstart-twenty
2024-05-14 10:58:30 +01:00
committed by GitHub
parent de438b0171
commit 1bc9b780e5
9 changed files with 259 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -21,6 +21,7 @@ type SingleTabProps = {
type TabListProps = {
tabListId: string;
tabs: SingleTabProps[];
loading?: boolean;
};
const StyledContainer = styled.div`
@ -33,7 +34,7 @@ const StyledContainer = styled.div`
user-select: none;
`;
export const TabList = ({ tabs, tabListId }: TabListProps) => {
export const TabList = ({ tabs, tabListId, loading }: TabListProps) => {
const initialActiveTabId = tabs[0].id;
const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
@ -60,7 +61,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
onClick={() => {
setActiveTabId(tab.id);
}}
disabled={tab.disabled}
disabled={tab.disabled ?? loading}
hasBetaPill={tab.hasBetaPill}
/>
))}