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

8
packages/twenty-front/src/modules/views/components/ViewBar.tsx
View File

@ -4,12 +4,14 @@ import { useParams } from 'react-router-dom';
import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/components/ObjectSortDropdownButton';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { TopBar } from '@/ui/layout/top-bar/TopBar';
import { QueryParamsFiltersEffect } from '@/views/components/QueryParamsFiltersEffect';
import { QueryParamsViewIdEffect } from '@/views/components/QueryParamsViewIdEffect';
import { ViewBarEffect } from '@/views/components/ViewBarEffect';
import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
import { ViewBarPageTitle } from '@/views/components/ViewBarPageTitle';
import { ViewBarSkeletonLoader } from '@/views/components/ViewBarSkeletonLoader';
import { ViewBarSortEffect } from '@/views/components/ViewBarSortEffect';
import { ViewScope } from '@/views/scopes/ViewScope';
import { GraphQLView } from '@/views/types/GraphQLView';
@ -38,6 +40,8 @@ export const ViewBar = ({
const filterDropdownId = 'view-filter';
const sortDropdownId = 'view-sort';
const loading = useIsPrefetchLoading();
if (!objectNamePlural) {
return;
}
@ -57,9 +61,7 @@ export const ViewBar = ({
<TopBar
className={className}
leftComponent={
<>
<ViewPickerDropdown />
</>
loading ? <ViewBarSkeletonLoader /> : <ViewPickerDropdown />
}
displayBottomBorder={false}
rightComponent={

15
packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx Normal file
View File

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