refactor: update LogoSpinner alt text to use translation for loading state

* Replaced static "Loading" alt text with a translatable string using the `useTranslation` hook across multiple components.
* This change enhances accessibility and supports localization for the loading indicator in various parts of the application.

Author: codingwolf-at

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx

@@ -66,7 +66,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
 
   return (
     <div className="flex size-full items-center justify-center">
-      <LogoSpinner size="fluid" alt="Loading" />
+      <LogoSpinner size="fluid" alt={t("common.loading")} />
     </div>
   );
 }

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -9,6 +9,7 @@ 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";
@@ -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({
@@ -154,7 +157,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
   if ((!page || !id) && !pageDetailsError)
     return (
       <div className="grid size-full place-items-center">
-        <LogoSpinner size="fluid" alt="Loading" />
+        <LogoSpinner size="fluid" alt={t("common.loading")} />
       </div>
     );
 

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx

@@ -8,6 +8,7 @@ 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
@@ -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();
@@ -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 size="fluid" alt="Loading" />
+        <LogoSpinner size="fluid" alt={t("common.loading")} />
       </div>
     );
 

apps/web/app/(all)/onboarding/page.tsx

@@ -12,6 +12,7 @@ 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
@@ -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, () => {
@@ -53,7 +56,7 @@ function OnboardingPage() {
               <OnboardingRoot invitations={invitations ?? []} />
             ) : (
               <div className="grid h-full w-full place-items-center">
-                <LogoSpinner size="fluid" alt="Loading" />
+                <LogoSpinner size="fluid" alt={t("common.loading")} />
               </div>
             )}
           </div>

apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx

@@ -34,7 +34,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
   if (!currentUser || !isAValidTab)
     return (
       <div className="grid size-full place-items-center px-4">
-        <LogoSpinner size="fluid" alt="Loading" />
+        <LogoSpinner size="fluid" alt={t("common.loading")} />
       </div>
     );
 

apps/web/app/(all)/workspace-invitations/page.tsx

@@ -20,6 +20,7 @@ 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
@@ -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();
 
@@ -127,7 +130,7 @@ function WorkspaceInvitationPage() {
           )
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <LogoSpinner size="fluid" alt="Loading" />
+            <LogoSpinner size="fluid" alt={t("common.loading")} />
           </div>
         )}
       </div>

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

@@ -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 size="fluid" alt="Loading" />
+        <LogoSpinner size="fluid" alt={t("common.loading")} />
       </div>
     );
 

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

@@ -8,6 +8,7 @@ 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 "@makeplane/propel/components/logo-spinner";
@@ -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();
@@ -87,7 +90,7 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
             )
           ) : (
             <div className="flex h-96 w-full items-center justify-center">
-              <LogoSpinner size="fluid" alt="Loading" />
+              <LogoSpinner size="fluid" alt={t("common.loading")} />
             </div>
           )}
         </div>

apps/web/core/components/workspace-notifications/root.tsx

@@ -9,6 +9,7 @@ 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
@@ -27,6 +28,8 @@ type NotificationsRootProps = {
 };
 
 export const NotificationsRoot = observer(function NotificationsRoot({ workspaceSlug }: NotificationsRootProps) {
+  // translation
+  const { t } = useTranslation();
   // hooks
   const { currentWorkspace } = useWorkspace();
   const {
@@ -94,7 +97,7 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
             <>
               {projectMemberInfoLoader ? (
                 <div className="flex h-full w-full items-center justify-center">
-                  <LogoSpinner size="fluid" alt="Loading" />
+                  <LogoSpinner size="fluid" alt={t("common.loading")} />
                 </div>
               ) : (
                 <InboxContentRoot

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

@@ -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";
@@ -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();
@@ -144,7 +147,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
     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 size="fluid" alt="Loading" />
+          <LogoSpinner size="fluid" alt={t("common.loading")} />
         </div>
       </div>
     );