Skip to content

refactor(web): migrate LogoSpinner to @makeplane/propel #9764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
codingwolf-at wants to merge 3 commits into
base: preview
Choose a base branch
from
Draft

refactor(web): migrate LogoSpinner to @makeplane/propel #9764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
045b226
refactor: migrate LogoSpinner to @makeplane/propel and update usage a…
codingwolf-at Sep 4, 2026
9612c3a
chore: update @makeplane/propel version in pnpm-lock.yaml to 0.3.0
codingwolf-at Sep 4, 2026
be9adeb
refactor: update LogoSpinner alt text to use translation for loading …
codingwolf-at Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...orkspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import emptyIssueDark from "@/app/assets/empty-state/search/issues-dark.webp?url
import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?url";
// components
import { EmptyState } from "@/components/common/empty-state";
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// hooks
import { useAppRouter } from "@/hooks/use-app-router";
// services
Expand Down Expand Up @@ -66,7 +66,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {

return (
<div className="flex size-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);
}
7 changes: 5 additions & 2 deletions ...[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import { observer } from "mobx-react";
import Link from "next/link";
import useSWR from "swr";
// plane types
import { useTranslation } from "@plane/i18n";
import { getButtonStyling } from "@plane/propel/button";
import type { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
import { EFileAssetType } from "@plane/types";
// plane ui
// plane utils
import { cn } from "@plane/utils";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { PageHead } from "@/components/core/page-title";
import { IssuePeekOverview } from "@/components/issues/peek-overview";
import type { TPageRootConfig, TPageRootHandlers } from "@/components/pages/editor/page-root";
Expand All @@ -43,6 +44,8 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
// router
const router = useAppRouter();
const { workspaceSlug, projectId, pageId } = params;
// translation
const { t } = useTranslation();
// store hooks
const { createPage, fetchPageDetails } = usePageStore(storeType);
const page = usePage({
Expand Down Expand Up @@ -154,7 +157,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
if ((!page || !id) && !pageDetailsError)
return (
<div className="grid size-full place-items-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);

Expand Down
7 changes: 5 additions & 2 deletions ...b/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import { useState } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IWebhook } from "@plane/types";
// ui
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { PageHead } from "@/components/core/page-title";
import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
Expand All @@ -29,6 +30,8 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
const [deleteWebhookModal, setDeleteWebhookModal] = useState(false);
// router
const { workspaceSlug, webhookId } = params;
// translation
const { t } = useTranslation();
// mobx store
const { currentWebhook, fetchWebhookById, updateWebhook } = useWebhook();
const { currentWorkspace } = useWorkspace();
Expand Down Expand Up @@ -90,7 +93,7 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
if (!currentWebhook)
return (
<div className="grid h-full w-full place-items-center p-4">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);

Expand Down
7 changes: 5 additions & 2 deletions apps/web/app/(all)/onboarding/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import { observer } from "mobx-react";
import useSWR from "swr";

// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { OnboardingRoot } from "@/components/onboarding";
// constants
import { USER_WORKSPACES_LIST } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
Expand All @@ -28,6 +29,8 @@ function OnboardingPage() {
// store hooks
const { data: user } = useUser();
const { fetchWorkspaces } = useWorkspace();
// translation
const { t } = useTranslation();

// fetching workspaces list
useSWR(USER_WORKSPACES_LIST, () => {
Expand All @@ -53,7 +56,7 @@ function OnboardingPage() {
<OnboardingRoot invitations={invitations ?? []} />
) : (
<div className="grid h-full w-full place-items-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { PROFILE_SETTINGS_TABS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import type { TProfileSettingsTabs } from "@plane/types";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { PageHead } from "@/components/core/page-title";
import { ProfileSettingsContent } from "@/components/settings/profile/content";
import { ProfileSettingsSidebarRoot } from "@/components/settings/profile/sidebar";
Expand All @@ -34,7 +34,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
if (!currentUser || !isAValidTab)
return (
<div className="grid size-full place-items-center px-4">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);

Expand Down
7 changes: 5 additions & 2 deletions apps/web/app/(all)/workspace-invitations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ import {
UserOutline,
} from "@makeplane/propel/icons";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
// constants
import { WORKSPACE_INVITATION } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
Expand All @@ -41,6 +42,8 @@ function WorkspaceInvitationPage() {
const invitation_id = searchParams.get("invitation_id");
const slug = searchParams.get("slug");
const token = searchParams.get("token");
// translation
const { t } = useTranslation();
// store hooks
const { data: currentUser } = useUser();

Expand Down Expand Up @@ -127,7 +130,7 @@ function WorkspaceInvitationPage() {
)
) : (
<div className="flex h-full w-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
)}
</div>
Expand Down
Binary file removed apps/web/app/assets/images/logo-spinner-dark.gif
View file
Open in desktop
Binary file not shown.
Binary file removed apps/web/app/assets/images/logo-spinner-light.gif
View file
Open in desktop
Binary file not shown.
14 changes: 6 additions & 8 deletions apps/web/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import type { ReactNode } from "react";
import { Links, Meta, Outlet, Scripts } from "react-router";
import type { LinksFunction } from "react-router";
import { ThemeProvider, useTheme } from "next-themes";
import { ThemeProvider } from "next-themes";
// plane imports
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
// types
Expand All @@ -21,7 +21,7 @@ import ogImage from "@/app/assets/og-image.png?url";
import globalStyles from "@/styles/globals.css?url";
import type { Route } from "./+types/root";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// lib
import { isStaleAssetError, recoverFromStaleAsset } from "@/lib/stale-asset-error";
// local
Expand Down Expand Up @@ -116,14 +116,12 @@ export default function Root() {
}

export function HydrateFallback() {
const { resolvedTheme } = useTheme();

// if we are on the server or the theme is not resolved, return an empty div
if (typeof window === "undefined" || resolvedTheme === undefined) return <div />;

// Propel's LogoSpinner paints both theme GIFs and CSS picks the active one via
// `data-theme`, so we do not wait on next-themes. Waiting left a blank canvas
// until `resolvedTheme` landed, which is the flash at the end of boot.
return (
<div className="relative flex h-screen w-full items-center justify-center bg-canvas">
<LogoSpinner />
<LogoSpinner size="fluid" alt="Loading" />
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/account/auth-forms/auth-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import useSWR from "swr";
import { useTranslation } from "@plane/i18n";
import type { IWorkspaceMemberInvitation } from "@plane/types";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
import { WorkspaceLogo } from "@/components/workspace/logo";
// helpers
import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
Expand Down Expand Up @@ -102,7 +102,7 @@ export const AuthHeader = observer(function AuthHeader(props: TAuthHeader) {
if (isLoading)
return (
<div className="flex h-full w-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);

Expand Down
22 changes: 0 additions & 22 deletions apps/web/core/components/common/logo-spinner.tsx
View file
Open in desktop

This file was deleted.

7 changes: 5 additions & 2 deletions apps/web/core/components/onboarding/create-or-join-workspaces.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { AlertOctagonOutline } from "@makeplane/propel/icons";
// plane imports
import { useTranslation } from "@plane/i18n";
import type { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// hooks
import { useUser } from "@/hooks/store/user";
import { useInstance } from "@/hooks/store/use-instance";
Expand All @@ -35,6 +36,8 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
const { invitations, stepChange, finishOnboarding } = props;
// states
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
// translation
const { t } = useTranslation();
// store hooks
const { data: user } = useUser();
const { config } = useInstance();
Expand Down Expand Up @@ -87,7 +90,7 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
)
) : (
<div className="flex h-96 w-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
)}
</div>
Expand Down
7 changes: 5 additions & 2 deletions apps/web/core/components/workspace-notifications/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import { observer } from "mobx-react";
import useSWR from "swr";
// plane imports
import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { cn } from "@plane/utils";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// hooks
import { useWorkspaceNotifications } from "@/hooks/store/notifications";
import { useWorkspace } from "@/hooks/store/use-workspace";
Expand All @@ -27,6 +28,8 @@ type NotificationsRootProps = {
};

export const NotificationsRoot = observer(function NotificationsRoot({ workspaceSlug }: NotificationsRootProps) {

@github-actions github-actions Bot Sep 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/no-high-complexity-react-function (warning)

NotificationsRoot has cyclomatic complexity 20, cognitive complexity 18, and maximum nesting depth 3, so its React logic is hard to understand and change. Extract independent branches into components or hooks.

Fix → Extract independent render branches and state logic into focused components or hooks until the control flow is easy to follow.

Docs

// translation
const { t } = useTranslation();
// hooks
const { currentWorkspace } = useWorkspace();
const {
Expand Down Expand Up @@ -94,7 +97,7 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
<>
{projectMemberInfoLoader ? (
<div className="flex h-full w-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
) : (
<InboxContentRoot
Expand Down
13 changes: 9 additions & 4 deletions apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import useSWR from "swr";
// ui
import { LogOutOutline } from "@makeplane/propel/icons";
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, getButtonStyling } from "@plane/propel/button";
import { PlaneLogo } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
Expand All @@ -20,7 +21,7 @@ import { cn } from "@plane/utils";
// assets
import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// constants
import {
WORKSPACE_MEMBERS,
Expand Down Expand Up @@ -50,6 +51,8 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
const { children, isLoading: isParentLoading = false } = props;
// router params
const { workspaceSlug } = useParams();
// translation
const { t } = useTranslation();
// store hooks
const { signOut, data: currentUser } = useUser();
const { fetchPartialProjects } = useProject();
Expand Down Expand Up @@ -137,12 +140,14 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
);
};

// if list of workspaces are not there then we have to render the spinner
if (isParentLoading || allWorkspaces === undefined || loader) {
// Spinner only on first load. `loader` is also set true on a workspace-info
// refetch; swapping to LogoSpinner then would unmount the home dashboard and
// put it back — the jitter after the page was already on screen.
if (isParentLoading || allWorkspaces === undefined || (loader && !currentWorkspaceInfo)) {
return (
<div className="grid h-full place-items-center rounded-lg border border-subtle p-4">
<div className="flex flex-col items-center gap-3 text-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
</div>
);
Expand Down
8 changes: 6 additions & 2 deletions apps/web/core/lib/wrappers/authentication-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import type { ReactNode } from "react";
import { observer } from "mobx-react";
import { useSearchParams, usePathname } from "next/navigation";
import useSWR from "swr";
// plane imports
import { useTranslation } from "@plane/i18n";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { LogoSpinner } from "@makeplane/propel/components/logo-spinner";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
Expand All @@ -36,6 +38,8 @@ export const AuthenticationWrapper = observer(function AuthenticationWrapper(pro
const nextPath = searchParams.get("next_path");
// props
const { children, pageType = EPageTypes.AUTHENTICATED } = props;
// translation
const { t } = useTranslation();
// hooks
const { isLoading: isUserLoading, data: currentUser, fetchCurrentUser } = useUser();
const { data: currentUserProfile } = useUserProfile();
Expand Down Expand Up @@ -81,7 +85,7 @@ export const AuthenticationWrapper = observer(function AuthenticationWrapper(pro
if ((isUserSWRLoading || isUserLoading || workspacesLoader) && !currentUser?.id)
return (
<div className="relative flex h-screen w-full items-center justify-center">
<LogoSpinner />
<LogoSpinner size="fluid" alt={t("common.loading")} />
</div>
);

Expand Down
Loading
Loading