From 8afa504b65ba03c781c825a16cc821d72b94873d Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Fri, 4 Oct 2024 11:41:05 +0200 Subject: [PATCH] Add Skeleton loading for side panel (#7394) This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7112](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7112). --- ### Description - To test you can use `await new Promise(r => setTimeout(r, 5000));` line 74 of \`openCreateActivityDrawer.ts\` - We added a recoil state to define the loading status - Design points to note: 1 - We did not change the chip component styles because would be unrelated to the issue can you confirm if you still need this change? ![](https://assets-service.gitstart.com/28455/c5999ef1-a7fc-4c53-b425-d0588092ba90.png) 2- In Figma, the loading state shows the Chip rendering an initial name before showing the loaded name, currently, we are rendering the correct name while loading, the change that makes this possible is below ![](https://assets-service.gitstart.com/28455/a0e14045-9a14-4d19-9570-62781fba1aa4.png) if we set it as null, the initial name would appear, but also the previous data in the state would affect the UI, passing the `activityObjectNameSingular` data allows us to clear the previous data, and make the Chip instantly updated, let us know if this behavior is fine, or if you still want an initial name to be rendered while is loading. 3 - Currently, the loading state of the tabs does not affect the selected tab (auto-defined by the component) should we change this logic for all Tabs used in the app, or make this behavior optional by using props? ![](https://assets-service.gitstart.com/28455/223c2e9f-3f4b-4107-b40d-f98a95266d5d.png) ### Demo ### Refs #7112 --------- Co-authored-by: gitstart-twenty Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Marie Stoppa --- .../components/LeftPanelSkeletonLoader.tsx | 6 +- ...ainNavigationDrawerItemsSkeletonLoader.tsx | 14 ++- .../components/RightPanelSkeletonLoader.tsx | 8 +- .../activities/components/SkeletonLoader.tsx | 47 +++++++-- .../hooks/useOpenCreateActivityDrawer.ts | 13 ++- .../components/FavoritesSkeletonLoader.tsx | 18 +++- ...onForObjectMetadataItemsSkeletonLoader.tsx | 16 ++- ...BoardColumnCardContainerSkeletonLoader.tsx | 18 +++- .../RecordInlineCellSkeletonLoader.tsx | 8 +- .../components/PropertyBoxSkeletonLoader.tsx | 13 ++- .../components/RightDrawerRecord.tsx | 9 -- .../states/isNewViewableRecordLoading.ts | 6 ++ .../components/RecordShowContainer.tsx | 99 ++++++++++--------- .../RecordTableCellSkeletonLoader.tsx | 8 +- .../SupportButtonSkeletonLoader.tsx | 5 +- .../skeletons/DropdownMenuSkeletonItem.tsx | 5 +- .../components/RightDrawerTopBar.tsx | 6 ++ .../components/ShowPageActivityContainer.tsx | 10 +- .../components/ShowPageRightContainer.tsx | 7 +- .../components/ShowPageSummaryCard.tsx | 5 +- .../ShowPageSummaryCardSkeletonLoader.tsx | 36 +++++++ ...gationDrawerSectionTitleSkeletonLoader.tsx | 8 +- .../components/ViewBarSkeletonLoader.tsx | 5 +- .../src/pages/auth/PasswordReset.tsx | 3 +- 24 files changed, 273 insertions(+), 100 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCardSkeletonLoader.tsx diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index 38803c9ef..c8de2f64c 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -3,6 +3,7 @@ import { motion } from 'framer-motion'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader'; @@ -67,7 +68,10 @@ export const LeftPanelSkeletonLoader = () => { highlightColor={BACKGROUND_LIGHT.transparent.lighter} borderRadius={4} > - + diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx index 2d660dfda..bfa360a98 100644 --- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx @@ -1,3 +1,4 @@ +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui'; @@ -26,9 +27,18 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({ highlightColor={BACKGROUND_LIGHT.transparent.lighter} borderRadius={4} > - {title && } + {title && ( + + )} {Array.from({ length }).map((_, index) => ( - + ))} diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx index 1c47a6cdc..9e9859436 100644 --- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx @@ -1,3 +1,4 @@ +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { @@ -60,7 +61,10 @@ const StyledSkeletonHeaderLoader = () => { highlightColor={BACKGROUND_LIGHT.transparent.lighter} borderRadius={4} > - + ); @@ -73,7 +77,7 @@ const StyledSkeletonAddLoader = () => { highlightColor={BACKGROUND_LIGHT.transparent.lighter} borderRadius={4} > - + ); }; diff --git a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx index 21478ed73..0b65ab114 100644 --- a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx @@ -1,6 +1,6 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledSkeletonContainer = styled.div` align-items: center; @@ -25,6 +25,21 @@ const StyledSkeletonSubSectionContent = styled.div` justify-content: center; `; +export const SKELETON_LOADER_HEIGHT_SIZES = { + standard: { + xs: 13, + s: 16, + m: 24, + l: 32, + xl: 40, + }, + columns: { + s: 84, + m: 120, + xxl: 542, + }, +}; + const SkeletonColumnLoader = ({ height }: { height: number }) => { const theme = useTheme(); return ( @@ -55,15 +70,35 @@ export const SkeletonLoader = ({ borderRadius={4} > - + {withSubSections && skeletonItems.map(({ id }, index) => ( - + - - - {index === 1 && } + + + {index === 1 && ( + + )} ))} diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts index 400c1f398..c35d27837 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts @@ -15,6 +15,7 @@ import { Task } from '@/activities/types/Task'; import { TaskTarget } from '@/activities/types/TaskTarget'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; +import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { ActivityTargetableObject } from '../types/ActivityTargetableEntity'; @@ -52,7 +53,9 @@ export const useOpenCreateActivityDrawer = ({ const setViewableRecordNameSingular = useSetRecoilState( viewableRecordNameSingularState, ); - + const setIsNewViewableRecordLoading = useSetRecoilState( + isNewViewableRecordLoadingState, + ); const setIsUpsertingActivityInDB = useSetRecoilState( isUpsertingActivityInDBState, ); @@ -64,6 +67,11 @@ export const useOpenCreateActivityDrawer = ({ targetableObjects: ActivityTargetableObject[]; customAssignee?: WorkspaceMember; }) => { + openRightDrawer(RightDrawerPages.ViewRecord); + setIsNewViewableRecordLoading(true); + setViewableRecordId(null); + setViewableRecordNameSingular(activityObjectNameSingular); + const activity = await createOneActivity({ assigneeId: customAssignee?.id, }); @@ -101,10 +109,9 @@ export const useOpenCreateActivityDrawer = ({ setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); setViewableRecordId(activity.id); - setViewableRecordNameSingular(activityObjectNameSingular); - openRightDrawer(RightDrawerPages.ViewRecord); setIsUpsertingActivityInDB(false); + setIsNewViewableRecordLoading(false); }; return openCreateActivityDrawer; diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx index 3822a12bc..5e5d1ea7f 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledSkeletonContainer = styled.div` display: flex; @@ -25,10 +26,19 @@ export const FavoritesSkeletonLoader = () => { borderRadius={4} > - + - - + + diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx index 70e00d717..70b965b18 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx @@ -1,3 +1,4 @@ +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; @@ -20,9 +21,18 @@ export const NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader: React. borderRadius={4} > - - - + + + ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index 4aeafd96f..afaf8e9d7 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -1,7 +1,8 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { StyledBoardCardBody, StyledBoardCardHeader, @@ -43,7 +44,10 @@ export const RecordBoardColumnCardContainerSkeletonLoader = ({ > - + @@ -51,8 +55,14 @@ export const RecordBoardColumnCardContainerSkeletonLoader = ({ skeletonItems.map(({ id }) => ( - - + + ))} diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx index 2e673478d..bd912d7b5 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useTheme } from '@emotion/react'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { StyledSkeletonDiv } from './RecordInlineCellContainer'; export const RecordInlineCellSkeletonLoader = () => { @@ -13,7 +14,10 @@ export const RecordInlineCellSkeletonLoader = () => { borderRadius={4} > - + ); diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx index 38ee35d74..88a499952 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledSkeletonDiv = styled.div` align-items: center; @@ -22,8 +23,14 @@ export const PropertyBoxSkeletonLoader = () => { > {skeletonItems.map(({ id }) => ( - - + + ))} diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx index e68ce3883..6a76206e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx @@ -19,15 +19,6 @@ export const RightDrawerRecord = () => { viewableRecordNameSingularState, ); const viewableRecordId = useRecoilValue(viewableRecordIdState); - - if (!viewableRecordNameSingular) { - throw new Error(`Object name is not defined`); - } - - if (!viewableRecordId) { - throw new Error(`Record id is not defined`); - } - const { objectNameSingular, objectRecordId } = useRecordShowPage( viewableRecordNameSingular ?? '', viewableRecordId ?? '', diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts new file mode 100644 index 000000000..904677204 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts @@ -0,0 +1,6 @@ +import { createState } from 'twenty-ui'; + +export const isNewViewableRecordLoadingState = createState({ + key: 'activities/is-new-viewable-record-loading', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index 5f23472fe..e72df975f 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -21,6 +21,7 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader'; import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; +import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection'; import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection'; import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState'; @@ -33,6 +34,7 @@ import { ShowPageContainer } from '@/ui/layout/page/ShowPageContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer'; import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard'; +import { ShowPageSummaryCardSkeletonLoader } from '@/ui/layout/show-page/components/ShowPageSummaryCardSkeletonLoader'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { FieldMetadataType, @@ -80,7 +82,9 @@ export const RecordShowContainer = ({ recordId: objectRecordId, }), ); - + const isNewViewableRecordLoading = useRecoilValue( + isNewViewableRecordLoadingState, + ); const [uploadImage] = useUploadImageMutation(); const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular }); @@ -162,53 +166,56 @@ export const RecordShowContainer = ({ const isReadOnly = objectMetadataItem.isRemote; const isMobile = useIsMobile() || isInRightDrawer; const isPrefetchLoading = useIsPrefetchLoading(); + const isNewRightDrawerItemLoading = + isInRightDrawer && isNewViewableRecordLoading; - const summaryCard = isDefined(recordFromStore) ? ( - - - - } - avatarType={recordIdentifier?.avatarType ?? 'rounded'} - onUploadPicture={ - objectNameSingular === 'person' ? onUploadPicture : undefined - } - /> - ) : ( - <> - ); + useUpdateRecord: useUpdateOneObjectRecordMutation, + hotkeyScope: InlineCellHotkeyScope.InlineCell, + isCentered: true, + }} + > + + + } + avatarType={recordIdentifier?.avatarType ?? 'rounded'} + onUploadPicture={ + objectNameSingular === 'person' ? onUploadPicture : undefined + } + /> + ) : ( + + ); const fieldsBox = ( <> diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx index b010bdaec..f62018d33 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledSkeletonContainer = styled.div` padding-left: ${({ theme }) => theme.spacing(2)}; @@ -15,7 +16,10 @@ const StyledRecordTableCellLoader = ({ width }: { width?: number }) => { highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + ); }; diff --git a/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx b/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx index 86d4d1b93..78440fe02 100644 --- a/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportButtonSkeletonLoader.tsx @@ -1,5 +1,6 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; export const SupportButtonSkeletonLoader = () => { const theme = useTheme(); @@ -9,7 +10,7 @@ export const SupportButtonSkeletonLoader = () => { highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + ); }; diff --git a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx index f4853bc48..820831f7c 100644 --- a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx +++ b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledDropdownMenuSkeletonContainer = styled.div` --horizontal-padding: ${({ theme }) => theme.spacing(1)}; @@ -21,7 +22,7 @@ export const DropdownMenuSkeletonItem = () => { baseColor={theme.background.quaternary} highlightColor={theme.background.secondary} > - + ); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx index 9176af203..b80b943e1 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx @@ -5,6 +5,7 @@ import { Chip, ChipAccent, ChipSize, useIcons } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; +import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { RightDrawerTopBarCloseButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton'; @@ -66,6 +67,10 @@ export const RightDrawerTopBar = () => { viewableRecordNameSingularState, ); + const isNewViewableRecordLoading = useRecoilValue( + isNewViewableRecordLoadingState, + ); + const viewableRecordId = useRecoilValue(viewableRecordIdState); const { objectMetadataItem } = useObjectMetadataItem({ @@ -95,6 +100,7 @@ export const RightDrawerTopBar = () => { > {!isRightDrawerMinimized && ( } size={ChipSize.Large} diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx index a69f54528..2e38456c4 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx @@ -1,8 +1,10 @@ import { RichTextEditor } from '@/activities/components/RichTextEditor'; import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; const StyledShowPageActivityContainer = styled.div` margin-top: ${({ theme }) => theme.spacing(6)}; @@ -16,7 +18,11 @@ export const ShowPageActivityContainer = ({ 'targetObjectNameSingular' | 'id' >; }) => { - return ( + const isNewViewableRecordLoading = useRecoilValue( + isNewViewableRecordLoadingState, + ); + + return !isNewViewableRecordLoading ? ( + ) : ( + <> ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index c06129296..dab0a2104 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -7,6 +7,7 @@ import { TimelineActivities } from '@/activities/timelineActivities/components/T import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; +import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { Button } from '@/ui/input/button/components/Button'; @@ -135,6 +136,10 @@ export const ShowPageRightContainer = ({ const isMobile = useIsMobile(); + const isNewViewableRecordLoading = useRecoilValue( + isNewViewableRecordLoadingState, + ); + const tabs = [ { id: 'richText', @@ -272,7 +277,7 @@ export const ShowPageRightContainer = ({ diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 9627be5d7..dca1b2cea 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -1,3 +1,4 @@ +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ChangeEvent, ReactNode, useRef } from 'react'; @@ -88,9 +89,9 @@ const StyledShowPageSummaryCardSkeletonLoader = () => { highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + - + ); diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCardSkeletonLoader.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCardSkeletonLoader.tsx new file mode 100644 index 000000000..51b15f506 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCardSkeletonLoader.tsx @@ -0,0 +1,36 @@ +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; + +const StyledContainer = styled.div` + display: flex; + gap: ${({ theme }) => theme.spacing(4)}; + height: ${({ theme }) => theme.spacing(19)}; + margin: ${({ theme }) => theme.spacing(4)}; +`; + +const StyledRectangularSkeleton = styled(Skeleton)` + height: ${({ theme }) => theme.spacing(4)}; + width: ${({ theme }) => theme.spacing(24)}; + margin: ${({ theme }) => theme.spacing(1)}; + border-radius: ${({ theme }) => theme.border.radius.sm}; +`; + +export const ShowPageSummaryCardSkeletonLoader = () => { + const theme = useTheme(); + return ( + + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx index fcd3ffe20..5391ea3e3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx @@ -1,6 +1,7 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; const StyledSkeletonTitle = styled.div` margin-bottom: ${(props) => props.theme.spacing(2)}; @@ -16,7 +17,10 @@ export const NavigationDrawerSectionTitleSkeletonLoader = () => { borderRadius={4} > - + ); diff --git a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx index a7d0c1b24..a82565afa 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx @@ -1,5 +1,6 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useTheme } from '@emotion/react'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; export const ViewBarSkeletonLoader = () => { const theme = useTheme(); @@ -9,7 +10,7 @@ export const ViewBarSkeletonLoader = () => { highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + ); }; diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 79ea70740..11cf5d016 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -10,6 +10,7 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { z } from 'zod'; +import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { Logo } from '@/auth/components/Logo'; import { Title } from '@/auth/components/Title'; import { useAuth } from '@/auth/hooks/useAuth'; @@ -174,7 +175,7 @@ export const PasswordReset = () => { highlightColor={theme.background.secondary} >