Merge pull request #3908 from Infisical/fix/ui-small-catches

feat: added autoplay to loading lottie and fixed tooltip in project select

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -33,7 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
         className
       )}
     >
-      <Lottie icon="infisical_loading" className="h-32 w-32" />
+      <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
       {text && isTextArray && (
         <AnimatePresence mode="wait">
           <motion.div

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -43,23 +43,25 @@ export const Tooltip = ({
       onOpenChange={onOpenChange}
     >
       <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
+      <TooltipPrimitive.Portal>
-        side={position}
+        <TooltipPrimitive.Content
-        align="center"
+          side={position}
-        sideOffset={5}
+          align="center"
-        {...props}
+          sideOffset={5}
-        className={twMerge(
+          {...props}
-          "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
+          className={twMerge(
-          isDisabled && "!hidden",
+            "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
-          center && "text-center",
+            isDisabled && "!hidden",
-          size === "sm" && "rounded-sm px-2 py-1 text-xs",
+            center && "text-center",
-          size === "md" && "rounded-md px-4 py-2 text-sm",
+            size === "sm" && "rounded-sm px-2 py-1 text-xs",
-          className
+            size === "md" && "rounded-md px-4 py-2 text-sm",
-        )}
+            className
-      >
+          )}
-        {content}
+        >
-        <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
+          {content}
-      </TooltipPrimitive.Content>
+          <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -113,7 +113,7 @@ export const ProjectSelect = () => {
             <div>
               <FontAwesomeIcon icon={faCube} className="text-xs" />
             </div>
-            <Tooltip content={currentWorkspace.name}>
+            <Tooltip content={currentWorkspace.name} className="max-w-96">
               <div className="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap">
                 {currentWorkspace?.name}
               </div>
@@ -176,7 +176,7 @@ export const ProjectSelect = () => {
                   >
                     <div className="flex items-center">
                       <div className="flex flex-1 items-center justify-between overflow-hidden">
-                        <Tooltip content={workspace.name}>
+                        <Tooltip side="right" className="break-words" content={workspace.name}>
                           <div className="max-w-40 overflow-hidden truncate whitespace-nowrap">
                             {workspace.name}
                           </div>

frontend/src/main.tsx

@@ -63,7 +63,7 @@ const router = createRouter({
   context: { serverConfig: null, queryClient },
   defaultPendingComponent: () => (
     <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
-      <Lottie icon="infisical_loading" className="h-32 w-32" />
+      <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
     </div>
   ),
   defaultNotFoundComponent: NotFoundPage,

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -891,7 +891,7 @@ export const OverviewPage = () => {
   if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
-        <Lottie icon="infisical_loading" className="h-32 w-32" />
+        <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
       </div>
     );
   }

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -253,7 +253,7 @@ export const SecretDropzone = ({
       >
         {isLoading ? (
           <div className="mb-16 flex items-center justify-center pt-16">
-            <Lottie icon="infisical_loading" className="h-32 w-32" />
+            <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
           </div>
         ) : (
           <div className="flex flex-col items-center justify-center space-y-2">