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

feat: Skeleton loading #404 (#458)

Browse Source 
* feat: Skeleton loading #404

* fix: skeleton loading

* fix: skeleton loading

* feat: Skeleton loading #404

* fix: skeleton loading

* fix: skeleton loading

* Update CompanyPickerSkeleton.tsx

* updated changes
This commit is contained in:
Deepak Singh
2023-07-05 19:20:36 +05:30
committed by GitHub
parent 9ea765fcfd
commit 6e1ffdcc72
10 changed files with 126 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/modules/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -10,6 +10,9 @@ import { isDefined } from '@/utils/type-guards/isDefined';
import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
import { CompanyPickerSkeleton } from './skeletons/CompanyPickerSkeleton';
import { DropdownMenuItemContainerSkeleton } from './skeletons/DropdownMenuItemContainerSkeleton';
export type EntitiesForSingleEntitySelect<
CustomEntityForSelect extends EntityForSelect,
> = {
@ -50,24 +53,29 @@ export function SingleEntitySelectBase<
return (
<DropdownMenuItemContainer ref={containerRef}>
{entitiesInDropdown?.map((entity, index) => (
<DropdownMenuSelectableItem
key={entity.id}
selected={entities.selectedEntity?.id === entity.id}
hovered={hoveredIndex === index}
onClick={() => onEntitySelected(entity)}
>
<Avatar
avatarUrl={entity.avatarUrl}
placeholder={entity.name}
size={16}
type={entity.avatarType ?? 'rounded'}
/>
{entity.name}
</DropdownMenuSelectableItem>
))}
{entitiesInDropdown?.length === 0 && (
{entities.loading ? (
<DropdownMenuItemContainerSkeleton>
<CompanyPickerSkeleton count={10} />
</DropdownMenuItemContainerSkeleton>
) : entitiesInDropdown.length === 0 ? (
<DropdownMenuItem>No result</DropdownMenuItem>
) : (
entitiesInDropdown?.map((entity, index) => (
<DropdownMenuSelectableItem
key={entity.id}
selected={entities.selectedEntity?.id === entity.id}
hovered={hoveredIndex === index}
onClick={() => onEntitySelected(entity)}
>
<Avatar
avatarUrl={entity.avatarUrl}
placeholder={entity.name}
size={16}
type={entity.avatarType ?? 'rounded'}
/>
{entity.name}
</DropdownMenuSelectableItem>
))
)}
</DropdownMenuItemContainer>
);