Merge pull request #8593 from weseek/imprv/133920-142527-replace-spinner-pulse-of-outside-app

imprv: 133920 142527 replace spinner pulse of outside app

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -2,11 +2,11 @@ import {
   useState, useCallback, useEffect,
 } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import { useSWRxAppSettings } from '~/stores/admin/app-settings';
 
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';

apps/app/src/components/Admin/AuditLogManagement.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React, { useState, useCallback, useRef } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 
@@ -10,7 +11,6 @@ import type { SupportedActionType } from '~/interfaces/activity';
 import { useSWRxActivity } from '~/stores/activity';
 import { useAuditLogEnabled, useAuditLogAvailableActions } from '~/stores/context';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 import PaginationWrapper from '../PaginationWrapper';
 
 import { ActivityTable } from './AuditLog/ActivityTable';

apps/app/src/components/Admin/Customize/CustomizeLayoutSetting.tsx

@@ -2,10 +2,10 @@ import React, {
   useCallback, useEffect, useState,
 } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import { useSWRxLayoutSetting } from '~/stores/admin/customize';
 import { useNextThemes } from '~/stores/use-next-themes';
 

apps/app/src/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 
 type Props = {
   isEnabled?: boolean,

apps/app/src/components/Admin/G2GDataTransferStatusIcon.tsx

@@ -1,8 +1,9 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
+
 import { G2G_PROGRESS_STATUS, type G2GProgressStatus } from '~/interfaces/g2g-transfer';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 
 /**
  * Props for {@link G2GDataTransferStatusIcon}

apps/app/src/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
 import { SlackbotType } from '@growi/slack';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 
@@ -8,7 +9,6 @@ import {
   apiv3Delete, apiv3Get, apiv3Post, apiv3Put,
 } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 
 import BotTypeCard from './BotTypeCard';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -10,7 +11,6 @@ import {
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import { useIsMailerSetup } from '~/stores/context';
 
 class PasswordResetModal extends React.Component {

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -5,12 +5,12 @@ import React, {
 import {
   type IPageInfoAll, isIPageInfoForOperation,
 } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownMenu, DropdownToggle, DropdownItem,
 } from 'reactstrap';
 
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import { NotAvailableForGuest } from '~/components/NotAvailableForGuest';
 import type { IPageOperationProcessData } from '~/interfaces/page-operation';
 import { useSWRxPageInfo } from '~/stores/page';

apps/app/src/components/DescendantsPageList.tsx

@@ -5,6 +5,7 @@ import type {
   IPageHasId,
   IPageInfoForOperation,
 } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import { toastSuccess } from '~/client/util/toastr';
@@ -17,7 +18,6 @@ import {
 } from '~/stores/page-listing';
 
 import type { ForceHideMenuItems } from './Common/Dropdown/PageItemControl';
-import { LoadingSpinner } from './LoadingSpinner';
 import PageList from './PageList/PageList';
 import PaginationWrapper from './PaginationWrapper';
 

apps/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -2,10 +2,10 @@ import type { FC } from 'react';
 import React from 'react';
 
 import type { HasObjectId } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 
 import type { IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 
 import InAppNotificationElm from './InAppNotificationElm';
 

apps/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React, { useState, useEffect, useCallback } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import { apiv3Put, apiv3Post } from '~/client/util/apiv3-client';
@@ -10,7 +11,6 @@ import loggerFactory from '~/utils/logger';
 
 import { useSWRxInAppNotifications, useSWRxInAppNotificationStatus } from '../../stores/in-app-notification';
 import CustomNavAndContents from '../CustomNavigation/CustomNavAndContents';
-import { LoadingSpinner } from '../LoadingSpinner';
 import PaginationWrapper from '../PaginationWrapper';
 
 import InAppNotificationList from './InAppNotificationList';

apps/app/src/components/InfiniteScroll.tsx

@@ -1,9 +1,9 @@
 import type { Ref } from 'react';
 import React, { useEffect, useState } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import type { SWRInfiniteResponse } from 'swr/infinite';
 
-import { LoadingSpinner } from './LoadingSpinner';
 
 type Props<T> = {
   swrInifiniteResponse: SWRInfiniteResponse<T>

apps/app/src/components/InstallerForm.tsx

@@ -2,6 +2,7 @@ import type { FormEventHandler } from 'react';
 import { memo, useCallback, useState } from 'react';
 
 import { Lang, AllLang } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 
@@ -10,7 +11,6 @@ import { i18n as i18nConfig } from '^/config/next-i18next.config';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
 
-import { LoadingSpinner } from './LoadingSpinner';
 
 const InstallerForm = memo((): JSX.Element => {
   const { t, i18n } = useTranslation();

apps/app/src/components/InvitedForm.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 
@@ -7,8 +8,6 @@ import { apiv3Post } from '~/client/util/apiv3-client';
 
 import { useCurrentUser } from '../stores/context';
 
-import { LoadingSpinner } from './LoadingSpinner';
-
 
 export type InvitedFormProps = {
   invitedFormUsername: string,

apps/app/src/components/LoadingSpinner.tsx

@@ -1,7 +0,0 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
-
-import styles from './LoadingSpinner.module.scss';
-
-export const LoadingSpinner = ({ className = '' }: ComponentPropsWithoutRef<'span'>): JSX.Element => (
-  <span className={`material-symbols-outlined pb-0 ${styles.spinner} ${className}`}>progress_activity</span>
-);

apps/app/src/components/LoginForm.tsx

@@ -2,6 +2,7 @@ import React, {
   useState, useEffect, useCallback,
 } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import ReactCardFlip from 'react-card-flip';
@@ -14,7 +15,6 @@ import { RegistrationMode } from '~/interfaces/registration-mode';
 import { toArrayIfNot } from '~/utils/array-utils';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
-import { LoadingSpinner } from './LoadingSpinner';
 
 import styles from './LoginForm.module.scss';
 

apps/app/src/components/Me/QuestionnaireSettings.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
@@ -8,8 +9,6 @@ import { toastError, toastSuccess } from '~/client/util/toastr';
 import { useSWRxIsQuestionnaireEnabled } from '~/features/questionnaire/client/stores/questionnaire';
 import { useCurrentUser } from '~/stores/context';
 
-import { LoadingSpinner } from '../LoadingSpinner';
-
 
 export const QuestionnaireSettings = (): JSX.Element => {
   const { t } = useTranslation();

apps/app/src/components/Page/RevisionLoader.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import type { Ref, IRevision, IRevisionHasId } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import type { RendererOptions } from '~/interfaces/renderer-options';
@@ -8,8 +9,6 @@ import { useSWRxPageRevision } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
 
-import { LoadingSpinner } from '../LoadingSpinner';
-
 import RevisionRenderer from './RevisionRenderer';
 
 export const ROOT_ELEM_ID = 'revision-loader' as const;

apps/app/src/components/PageAccessoriesModal/PageAttachment.tsx

@@ -3,13 +3,13 @@ import React, {
 } from 'react';
 
 import type { IAttachmentHasId } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 
 import { useSWRxAttachments } from '~/stores/attachment';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
 import { useDeleteAttachmentModal } from '~/stores/modal';
 import { useSWRxCurrentPage, useCurrentPageId } from '~/stores/page';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 import { PageAttachmentList } from '../PageAttachment/PageAttachmentList';
 import PaginationWrapper from '../PaginationWrapper';
 

apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 
 import type { IUser } from '@growi/core';
-import { UserPicture } from '@growi/ui/dist/components';
+import { UserPicture, LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
@@ -13,7 +13,6 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useDeleteAttachmentModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 import { Username } from '../User/Username';
 
 import styles from './DeleteAttachmentModal.module.scss';

apps/app/src/components/PageControls/BookmarkButtons.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React, { useState, useCallback } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import DropdownToggle from 'reactstrap/esm/DropdownToggle';
 import Popover from 'reactstrap/esm/Popover';
@@ -12,7 +13,6 @@ import { useIsGuestUser } from '~/stores/context';
 
 import { BookmarkFolderMenu } from '../Bookmarks/BookmarkFolderMenu';
 import UserPictureList from '../Common/UserPictureList';
-import { LoadingSpinner } from '../LoadingSpinner';
 
 import styles from './BookmarkButtons.module.scss';
 import popoverStyles from './user-list-popover.module.scss';

apps/app/src/components/PageEditor/DrawioModal.tsx

@@ -6,6 +6,7 @@ import React, {
 
 import { useCodeMirrorEditorIsolated } from '@growi/editor';
 import { useDrawioModalForEditor } from '@growi/editor/src/stores/use-drawio';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import {
   Modal,
   ModalBody,
@@ -18,7 +19,6 @@ import { useDrawioModal } from '~/stores/modal';
 import { usePersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 
 import { type DrawioConfig, DrawioCommunicationHelper } from './DrawioCommunicationHelper';
 

apps/app/src/components/PageList/PageList.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import type { IPageInfoForEntity, IPageWithMeta } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 import type { OnDeletedFunction, OnPutBackedFunction } from '~/interfaces/ui';
 
 import type { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
-import { LoadingSpinner } from '../LoadingSpinner';
 
 import { PageListItemL } from './PageListItemL';
 

apps/app/src/components/PagePresentationModal.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import type { PresentationProps } from '@growi/presentation';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useFullScreen } from '@growi/ui/dist/utils';
 import dynamic from 'next/dynamic';
 import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
@@ -14,7 +15,6 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { usePresentationViewOptions } from '~/stores/renderer';
 import { useNextThemes } from '~/stores/use-next-themes';
 
-import { LoadingSpinner } from './LoadingSpinner';
 
 import styles from './PagePresentationModal.module.scss';
 

apps/app/src/components/PrivateLegacyPages.tsx

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 
 import { useGlobalSocket } from '@growi/core/dist/swr';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Modal, ModalHeader, ModalBody, ModalFooter,
@@ -25,7 +26,6 @@ import {
 } from '~/stores/search';
 
 import { MenuItemType } from './Common/Dropdown/PageItemControl';
-import { LoadingSpinner } from './LoadingSpinner';
 import PaginationWrapper from './PaginationWrapper';
 import { PrivateLegacyPagesMigrationModal } from './PrivateLegacyPagesMigrationModal';
 import { OperateAllControl } from './SearchPage/OperateAllControl';

apps/app/src/components/SavePageControls.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useState, useEffect } from 'react';
 import type EventEmitter from 'events';
 
 import { isTopPage, isUsersProtectedPages } from '@growi/core/dist/utils/page-path-utils';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   UncontrolledButtonDropdown, Button,
@@ -28,7 +29,6 @@ import loggerFactory from '~/utils/logger';
 
 import { unpublish } from '../client/services/page-operation';
 
-import { LoadingSpinner } from './LoadingSpinner';
 import { GrantSelector } from './SavePageControls/GrantSelector';
 import { SlackNotification } from './SlackNotification';
 

apps/app/src/components/SavePageControls/GrantSelector/GrantSelector.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import {
   PageGrant, isPopulated, GroupType, type IGrantedGroup,
 } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   UncontrolledDropdown,
@@ -11,7 +12,6 @@ import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import type { IPageGrantData } from '~/interfaces/page';
 import { useCurrentUser } from '~/stores/context';
 

apps/app/src/components/SearchPage/SearchPageBase.tsx

@@ -3,6 +3,7 @@ import React, {
   forwardRef, useEffect, useImperativeHandle, useRef, useState,
 } from 'react';
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 
@@ -17,7 +18,6 @@ import { usePageDeleteModal } from '~/stores/modal';
 import { mutatePageTree } from '~/stores/page-listing';
 
 import type { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
-import { LoadingSpinner } from '../LoadingSpinner';
 
 // Do not import with next/dynamic
 // see: https://github.com/weseek/growi/pull/7923

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -9,6 +9,7 @@ import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/src/st
 import {
   extractSupportedLocales, getLocalizedTemplate, type TemplateSummary,
 } from '@growi/pluginkit/dist/v4';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   Modal,
@@ -26,7 +27,6 @@ import { usePersonalSettings } from '~/stores/personal-settings';
 import { usePreviewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
-import { LoadingSpinner } from '../LoadingSpinner';
 import Preview from '../PageEditor/Preview';
 
 import { useFormatter } from './use-formatter';

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -6,6 +6,7 @@ import React, {
 import nodePath from 'path';
 
 import type { Nullable } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
@@ -15,7 +16,6 @@ import { usePageTreeDescCountMap } from '~/stores/ui';
 import { shouldRecoverPagePaths } from '~/utils/page-operation';
 
 import CountBadge from '../Common/CountBadge';
-import { LoadingSpinner } from '../LoadingSpinner';
 
 import { ItemNode } from './ItemNode';
 import { useNewPageInput } from './NewPageInput';

apps/app/src/pages/tags.page.tsx

@@ -2,13 +2,13 @@ import type { ReactNode } from 'react';
 import React, { useState, useCallback } from 'react';
 
 import type { IUser } from '@growi/core';
+import { LoadingSpinner } from '@growi/ui/dist/components';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
-import { LoadingSpinner } from '~/components/LoadingSpinner';
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';

apps/app/src/styles/vendor.scss

@@ -1,5 +1,7 @@
 @import '@growi/core/scss/bootstrap/apply';
 
+@import '@growi/ui/dist/style';
+
 // react-bootstrap-typeahead
 @import 'react-bootstrap-typeahead/css/Typeahead';
 

apps/app/turbo.json

@@ -4,6 +4,7 @@
   "pipeline": {
 
     "styles-prebuilt": {
+      "dependsOn": ["@growi/ui#build"],
       "outputs": ["src/styles/prebuilt/**"],
       "inputs": [
         "src/styles/**/*.scss",
@@ -24,6 +25,7 @@
       "outputMode": "new-only"
     },
     "dev:styles-prebuilt": {
+      "dependsOn": ["@growi/ui#dev"],
       "outputs": ["src/styles/prebuilt/**"],
       "inputs": [
         "src/styles/**/*.scss",

packages/remark-attachment-refs/package.json

@@ -33,7 +33,9 @@
     "dev": "run-p dev:*",
     "dev:server": "vite build -c vite.server.config.ts --mode dev",
     "dev:client": "vite build -c vite.client.config.ts --mode dev",
-    "watch": "yarn dev -w --emptyOutDir=false",
+    "watch": "run-p watch:*",
+    "watch:client": "yarn dev:client -w --emptyOutDir=false",
+    "watch:server": "yarn dev:server -w --emptyOutDir=false",
     "lint:js": "yarn eslint **/*.{js,jsx,ts,tsx}",
     "lint:styles": "stylelint src/**/*.scss src/**/*.css",
     "lint:typecheck": "tsc",

packages/remark-attachment-refs/src/client/components/AttachmentList.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import type { IAttachmentHasId } from '@growi/core';
-import { Attachment } from '@growi/ui/dist/components';
+import { Attachment, LoadingSpinner } from '@growi/ui/dist/components';
 
 import { ExtractedAttachments } from './ExtractedAttachments';
 import { RefsContext } from './util/refs-context';
@@ -43,7 +43,7 @@ export const AttachmentList = ({
     if (isLoading) {
       return (
         <div className="text-muted">
-          <i className="fa fa-spinner fa-pulse me-1"></i>
+          <LoadingSpinner className="me-1" />
           <span className="attachment-refs-blink">{refsContext.toString()}</span>
         </div>
       );

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 
 
+import { LoadingSpinner } from '@growi/ui/dist/components';
+
 import { useSWRxLsx } from '../stores/lsx';
 import { generatePageNodeTree } from '../utils/page-node';
 
@@ -71,7 +73,7 @@ const LsxSubstance = React.memo(({
     return (
       <div className={`text-muted ${isLoading ? 'lsx-blink' : ''}`}>
         <small>
-          <i className="fa fa-spinner fa-pulse me-1"></i>
+          <LoadingSpinner className="me-1" />
           {lsxContext.toString()}
         </small>
       </div>

packages/ui/package.json

@@ -21,6 +21,9 @@
     "./dist/utils": {
       "import": "./dist/utils/index.js"
     },
+    "./dist/style": {
+      "import": "./dist/style.css"
+    },
     "./scss/*": "./scss/*.scss"
   },
   "scripts": {

apps/app/src/components/LoadingSpinner.module.scss → packages/ui/src/components/LoadingSpinner.module.scss

@@ -37,3 +37,4 @@
     transform: rotate(360deg);
   }
 }
+

packages/ui/src/components/LoadingSpinner.tsx

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import styles from './LoadingSpinner.module.scss';
+
+const moduleClass = styles.spinner ?? '';
+
+export const LoadingSpinner = ({ className = '' }: ComponentPropsWithoutRef<'span'>): JSX.Element => (
+  <span className={`material-symbols-outlined pb-0 ${moduleClass} ${className}`}>progress_activity</span>
+);

packages/ui/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Attachment';
 export * from './FootstampIcon';
 export * from './PagePath';
+export * from './LoadingSpinner';
 export * from './UserPicture';