Enh/improve skeletton loading (#810)

* Update skeleton styling

* Update skeleton color

* Remove useless color

* Add loading test case

* naming

* Improve test

* Fix colors

* Add import

* Lint

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/.storybook/preview.ts

@@ -4,6 +4,7 @@ import { ThemeProvider } from '@emotion/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
 import { RootDecorator } from '../src/testing/decorators';
+import 'react-loading-skeleton/dist/skeleton.css';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 initialize();
 

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -6,6 +6,7 @@ import { IconPlus } from '@/ui/icon/index';
 import { Avatar } from '@/users/components/Avatar';
 import { ComponentDecorator } from '~/testing/decorators';
 
+import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenu } from '../DropdownMenu';
 import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
 import { DropdownMenuItem } from '../DropdownMenuItem';
@@ -194,6 +195,19 @@ export const SimpleMenuItem: Story = {
   ),
 };
 
+export const LoadingMenu: Story = {
+  ...WithContentBelow,
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuSearch value={'query'} autoFocus />
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer hasMaxHeight>
+        <DropdownMenuSkeletonItem />
+      </DropdownMenuItemsContainer>
+    </DropdownMenu>
+  ),
+};
+
 export const Search: Story = {
   ...WithContentBelow,
   render: (args) => (

front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import Skeleton from 'react-loading-skeleton';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
@@ -14,7 +13,7 @@ import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
-import { DropdownMenuItemsContainerSkeleton } from './skeletons/DropdownMenuItemsContainerSkeleton';
+import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
 
 export type EntitiesForSingleEntitySelect<
   CustomEntityForSelect extends EntityForSelect,
@@ -67,9 +66,7 @@ export function SingleEntitySelectBase<
   return (
     <DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
       {entities.loading ? (
-        <DropdownMenuItemsContainerSkeleton>
+        <DropdownMenuSkeletonItem />
-          <Skeleton height={24} />
-        </DropdownMenuItemsContainerSkeleton>
       ) : entitiesInDropdown.length === 0 ? (
         <DropdownMenuItem>No result</DropdownMenuItem>
       ) : (

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-export const DropdownMenuItemsContainerSkeleton = styled.div`
-  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
-  --vertical-padding: ${({ theme }) => theme.spacing(1)};
-  align-items: center;
-
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-
-  color: blue;
-
-  height: calc(100% - 2 * var(--vertical-padding));
-
-  padding: var(--vertical-padding) var(--horizontal-padding);
-  width: calc(100% - 2 * var(--horizontal-padding));
-`;

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -0,0 +1,28 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledDropdownMenuSkeletonContainer = styled.div`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: calc(32px - 2 * var(--vertical-padding));
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  width: calc(100% - 2 * var(--horizontal-padding));
+`;
+
+export function DropdownMenuSkeletonItem() {
+  const theme = useTheme();
+  return (
+    <StyledDropdownMenuSkeletonContainer>
+      <SkeletonTheme
+        baseColor="transparent"
+        highlightColor={theme.background.tertiary}
+      >
+        <Skeleton height={16} />
+      </SkeletonTheme>
+    </StyledDropdownMenuSkeletonContainer>
+  );
+}