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

Prefetch Skeleton Loading on Indexes and Shows (#5545)

Browse Source 
### Description
Prefetch Skeleton Loading on Indexes and Shows

### Refs
#4458

### Demo

https://jam.dev/c/a1ad04e1-80b6-4b2a-b7df-373f52f4b169

https://jam.dev/c/c5038b97-2f18-4c29-8dee-18c09376e5ee

Fixes: #4458

---------

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>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2024-05-27 15:56:08 +08:00
committed by GitHub
parent cfd83d6b8e
commit 9c046dcfdb
60 changed files with 490 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/support/components/SupportChat.tsx
View File

@ -7,6 +7,8 @@ import { IconHelpCircle } from 'twenty-ui';
import { currentUserState } from '@/auth/states/currentUserState';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { SupportChatSkeletonLoader } from '@/support/components/SupportChatSkeletonLoader';
import { Button } from '@/ui/input/button/components/Button';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { User } from '~/generated/graphql';
@ -37,6 +39,7 @@ export const SupportChat = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const supportChat = useRecoilValue(supportChatState);
const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
const loading = useIsPrefetchLoading();
const configureFront = useCallback(
(
@ -98,6 +101,10 @@ export const SupportChat = () => {
currentWorkspaceMember,
]);
if (loading) {
return <SupportChatSkeletonLoader />;
}
return isFrontChatLoaded ? (
<StyledButtonContainer>
<Button

15
packages/twenty-front/src/modules/support/components/SupportChatSkeletonLoader.tsx Normal file
View File

@ -0,0 +1,15 @@
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
export const SupportChatSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton width={84} height={24} />
</SkeletonTheme>
);
};

2
packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx
View File

@ -7,6 +7,7 @@ import { currentUserState } from '@/auth/states/currentUserState';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import {
mockDefaultWorkspace,
@ -35,6 +36,7 @@ const meta: Meta<typeof SupportChat> = {
return <Story />;
},
PrefetchLoadingDecorator,
],
parameters: {
msw: graphqlMocks,