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>
     );
 

web/layouts/auth-layout/project-wrapper.tsx

@@ -2,11 +2,10 @@ import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
 // components
-import { Spinner } from "@plane/ui";
 import { JoinProject } from "@/components/auth-screens";
-import { EmptyState } from "@/components/common";
+import { EmptyState, LogoSpinner } from "@/components/common";
+// hooks
 import {
   useEventTracker,
   useCycle,
@@ -109,7 +108,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
-          <Spinner />
+          <LogoSpinner />
         </div>
       </div>
     );

web/layouts/auth-layout/workspace-wrapper.tsx

@@ -7,7 +7,8 @@ import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { LogOut } from "lucide-react";
 // hooks
-import { Button, Spinner, TOAST_TYPE, setToast, Tooltip } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast, Tooltip } from "@plane/ui";
+import { LogoSpinner } from "@/components/common";
 import { useMember, useProject, useUser, useWorkspace } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // images
@@ -82,7 +83,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
-          <Spinner />
+          <LogoSpinner />
         </div>
       </div>
     );

web/lib/wrappers/authentication-wrapper.tsx

@@ -2,7 +2,8 @@ import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { Spinner } from "@plane/ui";
+// components
+import { LogoSpinner } from "@/components/common";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
 // hooks
@@ -62,7 +63,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
   if (isUserSWRLoading || isUserLoading)
     return (
       <div className="relative flex h-screen w-full items-center justify-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/lib/wrappers/instance-wrapper.tsx

@@ -1,9 +1,8 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-// ui
-import { Spinner } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { InstanceNotReady } from "@/components/instance";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -25,7 +24,7 @@ export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
   if (isLoading)
     return (
       <div className="relative flex h-screen w-full items-center justify-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -9,8 +9,9 @@ import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
 // types
 import { TPage } from "@plane/types";
 // ui
-import { Spinner, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { PageDetailsHeader } from "@/components/headers";
 import { IssuePeekOverview } from "@/components/issues";
@@ -69,7 +70,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   if ((!pageStore || !pageStore.id) && !pageDetailsError)
     return (
       <div className="h-full w-full grid place-items-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx

@@ -4,8 +4,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { IWebhook } from "@plane/types";
 // hooks
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
-
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { WorkspaceSettingHeader } from "@/components/headers";
 import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
@@ -13,7 +14,6 @@ import { useUser, useWebhook, useWorkspace } from "@/hooks/store";
 // layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
-// components
 // ui
 // types
 import { NextPageWithLayout } from "@/lib/types";
@@ -87,7 +87,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
   if (!currentWebhook)
     return (
       <div className="grid h-full w-full place-items-center p-4">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/pages/installations/[provider]/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, ReactElement } from "react";
 import { useRouter } from "next/router";
-// services
 // ui
-import { Spinner } from "@plane/ui";
+import { LogoSpinner } from "@/components/common";
 // types
 import { NextPageWithLayout } from "@/lib/types";
+// services
 import { AppInstallationService } from "@/services/app_installation.service";
 
 // services
@@ -64,7 +64,7 @@ const AppPostInstallation: NextPageWithLayout = () => {
   return (
     <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
       <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
-      <Spinner />
+      <LogoSpinner />
     </div>
   );
 };

web/pages/onboarding/index.tsx

@@ -4,9 +4,8 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // types
 import { TOnboardingSteps, TUserProfile } from "@plane/types";
-// ui
-import { Spinner } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { InviteMembers, CreateOrJoinWorkspaces, ProfileSetup } from "@/components/onboarding";
 // constants
@@ -177,7 +176,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
         </div>
       ) : (
         <div className="grid h-screen w-full place-items-center">
-          <Spinner />
+          <LogoSpinner />
         </div>
       )}
     </>

web/pages/profile/change-password.tsx

@@ -4,9 +4,10 @@ import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
 // ui
-import { Button, Input, Spinner, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
 import { PasswordStrengthMeter } from "@/components/account";
+import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar";
 import { getPasswordStrength } from "@/helpers/password.helper";
@@ -133,7 +134,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   if (isPageLoading)
     return (
       <div className="grid h-screen w-full place-items-center">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/pages/profile/index.tsx

@@ -8,17 +8,9 @@ import { Disclosure, Transition } from "@headlessui/react";
 // layouts
 // components
 import type { IUser } from "@plane/types";
-import {
-  Button,
-  CustomSelect,
-  CustomSearchSelect,
-  Input,
-  Spinner,
-  TOAST_TYPE,
-  setPromiseToast,
-  setToast,
-} from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 import { DeactivateAccountModal } from "@/components/account";
+import { LogoSpinner } from "@/components/common";
 import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
 // ui
 // icons
@@ -134,7 +126,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
   if (!currentUser)
     return (
       <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <Spinner />
+        <LogoSpinner />
       </div>
     );
 

web/pages/profile/preferences/theme.tsx

@@ -2,8 +2,9 @@ import { useEffect, useState, ReactElement } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 // ui
-import { Spinner, setPromiseToast } from "@plane/ui";
+import { setPromiseToast } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
 // constants
 import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
@@ -68,7 +69,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
         </div>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-          <Spinner />
+          <LogoSpinner />
         </div>
       )}
     </>

web/pages/workspace-invitations.tsx

@@ -3,8 +3,8 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
-import { Spinner } from "@plane/ui";
 // components
+import { LogoSpinner } from "@/components/common";
 import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
 // constants
 import { WORKSPACE_INVITATION } from "@/constants/fetch-keys";
@@ -119,7 +119,7 @@ const WorkspaceInvitationPage: NextPageWithLayout = observer(() => {
         </EmptySpace>
       ) : (
         <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
+          <LogoSpinner />
         </div>
       )}
     </div>