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,6 +43,7 @@ export const Tooltip = ({
       onOpenChange={onOpenChange}
     >
       <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
         <TooltipPrimitive.Content
           side={position}
           align="center"
@@ -60,6 +61,7 @@ export const Tooltip = ({
           {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">