feat: updated lotties for the products

2026-10-14 07:30:20 +00:00 · 2025-07-02 01:16:50 +05:30
parent fa7318eeb1
commit 74067751a6
12 changed files with 932 additions and 61 deletions
@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";

+import { Lottie } from "../Lottie";
+
 type Props = {
  children: ReactNode;
  isDisabled?: boolean;
@@ -189,11 +191,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
        {...props}
      >
        {isLoading && (
-          <img
-            src="/images/loading/loading.gif"
-            width={36}
-            alt="loading animation"
-            className="absolute rounded-xl opacity-80"
+          <Lottie
+            icon={
+              variant === "solid" && colorSchema === "primary"
+                ? "infisical_loading_bw"
+                : "infisical_loading"
+            }
+            isAutoPlay
+            className="absolute w-8 rounded-xl opacity-80 shadow-sm"
          />
        )}
        {leftIcon && (
@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";

+import { Lottie } from "../Lottie";
+
 type Props = {
  text?: string | string[];
  frequency?: number;
@@ -31,14 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
        className
      )}
    >
-      <img
-        src="/images/loading/loading.gif"
-        height={70}
-        width={120}
-        alt="loading animation"
-        decoding="async"
-        loading="lazy"
-      />
+      <Lottie icon="infisical_loading" className="h-32 w-32" />
      {text && isTextArray && (
        <AnimatePresence mode="wait">
          <motion.div
@@ -7,10 +7,11 @@ export type LottieProps = {
  icon?: string;
  iconMode?: Mode;
  className?: string;
+  isAutoPlay?: boolean;
 };

 export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
-  ({ children, icon, iconMode, ...props }, ref): JSX.Element => {
+  ({ children, icon, iconMode, isAutoPlay, ...props }, ref): JSX.Element => {
    const iconRef = useRef<DotLottie | null>(null);
    return (
      <div
@@ -26,6 +27,7 @@ export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
          mode={iconMode}
          src={`/lotties/${icon}.json`}
          loop
+          autoplay={isAutoPlay}
          className="h-full w-full"
        />
        {children}
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
-import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
  faArrowUpRightFromSquare,
  faBook,
@@ -28,7 +28,6 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
  IconButton,
-  Lottie,
  Modal,
  ModalContent,
  TBreadcrumbFormat
@@ -252,8 +251,8 @@ export const Navbar = () => {
          onMouseEnter={() => setOpenSupport(true)}
          onMouseLeave={() => setOpenSupport(false)}
        >
-          <div>
-            <FontAwesomeIcon icon={faCircleQuestion} size="xl" className="text-white" />
+          <div className="mr-2">
+            <FontAwesomeIcon icon={faCircleQuestion} size="lg" className="text-mineshaft-200" />
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent
@@ -311,7 +310,7 @@ export const Navbar = () => {
          onMouseLeave={() => setOpenUser(false)}
        >
          <div>
-            <Lottie icon="user" className="w-14" />
+            <FontAwesomeIcon icon={faUserCircle} size="lg" className="text-mineshaft-200" />
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { faDotCircle, faHome, faMobile, faWindowMaximize } from "@fortawesome/free-solid-svg-icons";
+import { faDotCircle, faMobile, faWindowMaximize } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
@@ -89,9 +89,7 @@ export const ProjectLayout = () => {
                    <MenuItem
                      className="relative flex items-center gap-2 overflow-hidden"
                      isSelected={isSecretManager}
-                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon="sliding-carousel" />
-                      }
+                      leftIcon={<Lottie className="inline-block h-6 w-6 shrink-0" icon="vault" />}
                    >
                      {isSecretManager && (
                        <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />
@@ -154,7 +152,7 @@ export const ProjectLayout = () => {
                      className="relative flex items-center gap-2 overflow-hidden"
                      isSelected={isSsh}
                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon="verified" />
+                        <Lottie className="inline-block h-6 w-6 shrink-0" icon="terminal" />
                      }
                    >
                      {isSsh && <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />}
@@ -244,23 +242,6 @@ export const ProjectLayout = () => {
              </Menu>
              <div className="flex-grow" />
              <Menu>
-                <ShouldWrap
-                  wrapper={Tooltip}
-                  isWrapped={sidebarStyle === SidebarStyle.Collapsed}
-                  content="Organization Home"
-                  position="right"
-                >
-                  <Link to="/organization/projects">
-                    <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
-                      leftIcon={
-                        <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
-                      }
-                    >
-                      Organization
-                    </MenuItem>
-                  </Link>
-                </ShouldWrap>
                <DropdownMenu>
                  <ShouldWrap
                    wrapper={Tooltip}
@@ -5,7 +5,7 @@ import lottieWasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import NProgress from "nprogress";

-import { ContentLoader } from "./components/v2";
+import { Lottie } from "./components/v2";
 import { queryClient } from "./hooks/api/reactQuery";
 import { ErrorPage } from "./pages/public/ErrorPage/ErrorPage";
 import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage";
@@ -62,8 +62,8 @@ const router = createRouter({
  routeTree,
  context: { serverConfig: null, queryClient },
  defaultPendingComponent: () => (
-    <div className="bg-bunker-800">
-      <ContentLoader />
+    <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
+      <Lottie icon="infisical_loading" className="h-32 w-32" />
    </div>
  ),
  defaultNotFoundComponent: NotFoundPage,
@@ -42,6 +42,7 @@ import {
  DropdownMenuTrigger,
  EmptyState,
  IconButton,
+  Lottie,
  Modal,
  ModalContent,
  PageHeader,
@@ -863,14 +864,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]">
-        <img
-          src="/images/loading/loading.gif"
-          height={70}
-          width={120}
-          alt="loading animation"
-          decoding="async"
-          loading="lazy"
-        />
+        <Lottie icon="infisical_loading" className="h-32 w-32" />
      </div>
    );
  }
@@ -10,7 +10,7 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality
 import { parseDotEnv, parseJson } from "@app/components/utilities/parseSecrets";
-import { Button, Modal, ModalContent } from "@app/components/v2";
+import { Button, Lottie, Modal, ModalContent } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
@@ -253,14 +253,7 @@ export const SecretDropzone = ({
      >
        {isLoading ? (
          <div className="mb-16 flex items-center justify-center pt-16">
-            <img
-              src="/images/loading/loading.gif"
-              height={70}
-              width={120}
-              decoding="async"
-              loading="lazy"
-              alt="loading animation"
-            />
+            <Lottie icon="infisical_loading" className="h-32 w-32" />
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center space-y-2">