fix: adding new spinner

web/components/account/auth-forms/auth-header.tsx

@@ -1,8 +1,8 @@
 import { FC, ReactNode } from "react";
 import useSWR from "swr";
 import { IWorkspaceMemberInvitation } from "@plane/types";
-import { Spinner } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { WorkspaceLogo } from "@/components/workspace/logo";
 // helpers
 import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
@@ -92,7 +92,7 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
   if (isLoading)
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/components/command-palette/actions/issue-actions/change-state.tsx

@@ -4,7 +4,8 @@ import { useRouter } from "next/router";
 // hooks
 import { Check } from "lucide-react";
 import { TIssue } from "@plane/types";
-import { Spinner, StateGroupIcon } from "@plane/ui";
+import { StateGroupIcon } from "@plane/ui";
+import { LogoSpinner } from "@/components/common";
 import { EIssuesStoreType } from "@/constants/issue";
 import { useProjectState, useIssues } from "@/hooks/store";
 // ui
@@ -58,7 +59,7 @@ export const ChangeIssueState: React.FC<Props> = observer((props) => {
           <div className="text-center">No states found</div>
         )
       ) : (
-        <Spinner />
+        <LogoSpinner />
       )}
     </>
   );

web/components/common/index.ts

@@ -2,3 +2,4 @@ export * from "./product-updates-modal";
 export * from "./empty-state";
 export * from "./latest-feature-block";
 export * from "./breadcrumb-link";
+export * from "./logo-spinner";

web/components/common/logo-spinner.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export const LogoSpinner = () => {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
+    </div>
+  );
+};

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -3,8 +3,7 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
-// ui
-import { Spinner } from "@plane/ui";
+import { LogoSpinner } from "@/components/common";
 import {
   ListLayout,
   CalendarLayout,
@@ -15,11 +14,10 @@ import {
   ProjectEmptyState,
   IssuePeekOverview,
 } from "@/components/issues";
-// hooks
-// helpers
 import { ActiveLoader } from "@/components/ui";
 // constants
 import { EIssuesStoreType } from "@/constants/issue";
+// hooks
 import { useIssues } from "@/hooks/store";
 
 export const ProjectLayoutRoot: FC = observer(() => {
@@ -64,7 +62,7 @@ export const ProjectLayoutRoot: FC = observer(() => {
             {/* mutation loader */}
             {issues?.loader === "mutation" && (
               <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
-                <Spinner className="w-4 h-4" />
+                <LogoSpinner />
               </div>
             )}
             {activeLayout === "list" ? (

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
-import { Spinner } from "@plane/ui";
+import { LogoSpinner } from "@/components/common";
 import { SpreadsheetQuickAddIssueForm } from "@/components/issues";
 import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 import { useProject } from "@/hooks/store";
@@ -66,7 +66,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   if (!issueIds || issueIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/components/issues/peek-overview/view.tsx

@@ -1,8 +1,7 @@
 import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
-// ui
-import { Spinner } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import {
   DeleteIssueModal,
   IssuePeekOverviewHeader,
@@ -144,7 +143,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
               {isLoading && !issue ? (
                 <div className="flex h-full w-full items-center justify-center">
-                  <Spinner />
+                  <LogoSpinner />
                 </div>
               ) : (
                 issue && (

web/components/onboarding/create-or-join-workspaces.tsx

@@ -5,8 +5,6 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 // types
 import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
-// ui
-import { Spinner } from "@plane/ui";
 // components
 import { Invitations, OnboardingHeader, SwitchOrDeleteAccountDropdown, CreateWorkspace } from "@/components/onboarding";
 // hooks
@@ -14,6 +12,7 @@ import { useUser } from "@/hooks/store";
 // assets
 import CreateJoinWorkspaceDark from "public/onboarding/create-join-workspace-dark.svg";
 import CreateJoinWorkspace from "public/onboarding/create-join-workspace.svg";
+import { LogoSpinner } from "../common";
 
 export enum ECreateOrJoinWorkspaceViews {
   WORKSPACE_CREATE = "WORKSPACE_CREATE",
@@ -74,7 +73,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
             />
           ) : (
             <div className="flex h-96 w-full items-center justify-center">
-              <Spinner />
+              <LogoSpinner />
             </div>
           )}
         </div>

web/components/page-views/workspace-dashboard.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { Spinner } from "@plane/ui";
-// components
+import { LogoSpinner } from "@/components/common";
 import { DashboardWidgets } from "@/components/dashboard";
 import { EmptyState } from "@/components/empty-state";
 import { IssuePeekOverview } from "@/components/issues";
@@ -14,7 +13,15 @@ import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCommandPalette, useAppRouter, useUserProfile,  useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
+import {
+  useCommandPalette,
+  useAppRouter,
+  useUserProfile,
+  useEventTracker,
+  useDashboard,
+  useProject,
+  useUser,
+} from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
 
 export const WorkspaceDashboardView = observer(() => {
@@ -90,7 +97,7 @@ export const WorkspaceDashboardView = observer(() => {
         </>
       ) : (
         <div className="grid h-full w-full place-items-center">
-          <Spinner />
+          <LogoSpinner />
         </div>
       )}
     </>

web/components/workspace/settings/workspace-details.tsx

@@ -5,8 +5,9 @@ import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { IWorkspace } from "@plane/types";
 // ui
-import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { WorkspaceImageUploadModal } from "@/components/core";
 import { DeleteWorkspaceModal } from "@/components/workspace";
 // constants
@@ -145,7 +146,7 @@ export const WorkspaceDetails: FC = observer(() => {
   if (!currentWorkspace)
     return (
       <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );