feat(container): animation improvement & add skeleton on entry menu

ref: MANAGER-14921 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Oct 30, 2024 · 947f4b1 · 947f4b1
1 parent ac8998a
commit 947f4b1
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 115 deletions.
diff --git a/...apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.test.tsx b/...apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.test.tsx
@@ -29,6 +29,7 @@ const node: Node = {
 const props: Props = {
   node: node,
   isSelected: false,
+  isLoading: false
 };
 
 const id: string = "assistance-link-item";
@@ -51,7 +52,7 @@ vi.mock('../SidebarLink', () => ({
 
 const renderAssistanceLinkItem = (props: Props) => {
   return render(
-    <AssistanceLinkItem node={props.node} isSelected={props.isSelected} />,
+    <AssistanceLinkItem node={props.node} isSelected={props.isSelected} isLoading={props.isLoading} />,
   );
 };
 

diff --git a/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx b/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx
@@ -2,19 +2,21 @@ import { Node } from '../navigation-tree/node';
 import { FunctionComponent } from 'react';
 import style from '../style.module.scss';
 import SidebarLink from '../SidebarLink';
+import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
 
 export type Props = {
     node: Node;
     isSelected: boolean;
+    isLoading: boolean;
 }
 
-export const AssistanceLinkItem: FunctionComponent<Props> = ({ node, isSelected }) => {
+export const AssistanceLinkItem: FunctionComponent<Props> = ({ node, isSelected, isLoading }) => {
     return (
         <li className={`flex align-items-center ${isSelected ? style.sidebar_menu_items_selected : ''} ${style.sidebar_menu_items}`} role="menuitem" data-testid="assistance-link-item">
-            <SidebarLink
+            {isLoading ? <OsdsSkeleton randomized className='mx-8' /> : <SidebarLink
                 handleOnClick={node.onClick}
                 node={node}
-            />
+            />}
         </li>
     )
 }
diff --git a/.../apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceSidebar.test.tsx b/.../apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceSidebar.test.tsx
@@ -41,6 +41,7 @@ const props: AssistanceProps = {
   nodeTree: assistanceTree,
   isShort: false,
   selectedNode: null,
+  isLoading: false
 };
 
 const renderAssistanceSidebar = (props: AssistanceProps) => {
@@ -49,6 +50,7 @@ const renderAssistanceSidebar = (props: AssistanceProps) => {
       nodeTree={props.nodeTree}
       selectedNode={props.selectedNode}
       isShort={props.isShort}
+      isLoading={props.isLoading}
     />,
   );
 };

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx
@@ -15,12 +15,14 @@ export interface AssistanceProps {
   nodeTree?: Node;
   isShort: boolean;
   selectedNode: Node;
+  isLoading: boolean;
 }
 
 const AssistanceSidebar: React.FC<ComponentProps<AssistanceProps>> = ({
   nodeTree,
   selectedNode,
-  isShort
+  isShort,
+  isLoading
 }): JSX.Element => {
   const { t } = useTranslation('sidebar');
   const shell = useShell();
@@ -119,6 +121,7 @@ const AssistanceSidebar: React.FC<ComponentProps<AssistanceProps>> = ({
         <AssistanceLinkItem
           key={`assistance_${node.id}`}
           node={node}
+          isLoading={isLoading}
           isSelected={node.id === selectedNode?.id}
         />
       ))}

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
@@ -4,10 +4,12 @@ import style from './style.module.scss';
 import SidebarLinkTag from './SidebarLinkTag';
 import { Node } from './navigation-tree/node';
 import StaticLink from '@/container/nav-reshuffle/sidebar/StaticLink';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OsdsIcon, OsdsSkeleton, OsdsSpinner } from '@ovhcloud/ods-components/react';
 import {
   ODS_ICON_NAME,
   ODS_ICON_SIZE,
+  ODS_SKELETON_SIZE,
+  ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
 import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
 
@@ -19,6 +21,7 @@ export type SidebarLinkProps = {
   handleOnEnter?(node: Node): void;
   id?: string;
   isShortText?: boolean;
+  isLoading?: boolean;
 };
 
 const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
@@ -29,6 +32,7 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
   handleOnEnter = () => { },
   id = '',
   isShortText = false,
+  isLoading = false,
 }: SidebarLinkProps): JSX.Element => {
   const { t } = useTranslation('sidebar');
 
@@ -56,9 +60,12 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
       data-testid={id}
       role="button"
     >
-      <span className='flex gap-2 align-items-center'>
-        <SvgIconWrapper name={node.svgIcon} height={32} width={32} className='p-1 fill-white block' />
-        {!isShortText && <span>{t(node.translation)}</span>}
+      <span className='flex gap-2 align-items-center w-full'>
+        <SvgIconWrapper name={node.svgIcon} height={32} width={32} className={`p-1 fill-white transition-all duration-200O shrink-0 ${isLoading && isShortText ? 'hidden' : 'block'}`} />
+        {isShortText &&
+          <OsdsSpinner className={`h-[32px] w-[32px] transition-all duration-200O shrink-0 ${isLoading ? 'block' : 'hidden'}`} size={ODS_SPINNER_SIZE.sm} contrasted />
+        }
+        {!isShortText && (isLoading ? <OsdsSkeleton inline={true} className='mx-2' size={ODS_SKELETON_SIZE.xs} randomized /> : <span>{t(node.translation)}</span>)}
       </span>
       <span className="flex justify-end align-items-center">
         {!isShortText && (count as number) > 0 && (

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/index.tsx
@@ -38,14 +38,15 @@ const SubTree = ({
   const lastElement = getLastElement(rootNode);
 
   useEffect(() => {
-    setTimeout(() => {
+    const timeOut = setTimeout(() => {
       setIsOpen(open);
     }, 10);
+    return () => clearTimeout(timeOut);
   }, [open])
 
   return (
     <div
-      className={`${style.subtree_content} ${isOpen ? style.subtree_content_open : ''}`}
+      className={`${style.subtree_content} ${isOpen ? style.subtree_content_open : style.subtree_content_close}`}
       onBlur={(e: any) => {
         const id = e.relatedTarget?.id.replace('-link', '');
         if (id === lastElement.id) {

diff --git a/...ages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss b/...ages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/style.module.scss
@@ -24,6 +24,13 @@
       width: 20rem;
       transition: transform 0.3s ease-in 0s, opacity 0.3s ease-in 0s, width 0s ease-out 0s;
     }
+
+    &_close {
+      transform: scaleX(0);
+      opacity: 0;
+      width: 20rem;
+      transition: transform 0.3s ease-in 0s, opacity 0.3s ease-in 0s, width 0s ease-out 0s;
+    }
   }
   &_list {
     min-height: 28.125rem;