replace old cow spinner with new spinner

hicommonwealth · Feb 20, 2024 · 561cd7c · 561cd7c
1 parent 18bd067
commit 561cd7c
Show file tree

Hide file tree

Showing 21 changed files with 45 additions and 69 deletions.
diff --git a/packages/commonwealth/client/scripts/App.tsx b/packages/commonwealth/client/scripts/App.tsx
@@ -9,13 +9,13 @@ import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { queryClient } from 'state/api/config';
 import { featureFlags } from './helpers/feature-flags';
-import { CWIcon } from './views/components/component_kit/cw_icons/cw_icon';
+import CWLoadingSpinner from './views/components/component_kit/new_designs/CWLoadingSpinner';
 
 const Splash = () => {
   return (
     <div className="Splash">
       {/* This can be a moving bobber, atm it is still */}
-      <CWIcon iconName="cow" iconSize="xxl" />
+      <CWLoadingSpinner center />
     </div>
   );
 };

diff --git a/packages/commonwealth/client/scripts/views/Layout.tsx b/packages/commonwealth/client/scripts/views/Layout.tsx
@@ -10,8 +10,8 @@ import ErrorPage from 'views/pages/error';
 import useNecessaryEffect from '../hooks/useNecessaryEffect';
 import SubLayout from './Sublayout';
 import { CWEmptyState } from './components/component_kit/cw_empty_state';
-import { CWSpinner } from './components/component_kit/cw_spinner';
 import { CWText } from './components/component_kit/cw_text';
+import CWLoadingSpinner from './components/component_kit/new_designs/CWLoadingSpinner';
 
 type LayoutAttrs = {
   Component: ReactNode | any;
@@ -99,7 +99,7 @@ const LayoutComponent = ({
 
     const Bobber = (
       <div className="spinner-container">
-        <CWSpinner size="xl" />
+        <CWLoadingSpinner center />
       </div>
     );
 

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx b/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx
@@ -9,7 +9,7 @@ import Thread from '../../../models/Thread';
 import { CWText } from '../../components/component_kit/cw_text';
 import { PageNotFound } from '../../pages/404';
 import { ImageBehavior } from '../component_kit/cw_cover_image_uploader';
-import { CWSpinner } from '../component_kit/cw_spinner';
+import CWLoadingSpinner from '../component_kit/new_designs/CWLoadingSpinner';
 import type { CommentWithAssociatedThread } from './ProfileActivity';
 import ProfileActivity from './ProfileActivity';
 import ProfileHeader from './ProfileHeader';
@@ -103,7 +103,7 @@ const Profile = ({ profileId }: ProfileProps) => {
     return (
       <div className="Profile loading">
         <div className="loading-spinner">
-          <CWSpinner />
+          <CWLoadingSpinner center />
         </div>
       </div>
     );

diff --git a/...ages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx b/...ages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx
@@ -45,7 +45,6 @@ import { CWProgressBar } from './cw_progress_bar';
 import type { RadioButtonType } from './cw_radio_button';
 import { CWRadioButton } from './cw_radio_button';
 import { CWRadioGroup } from './cw_radio_group';
-import { CWSpinner } from './cw_spinner';
 import { CWText } from './cw_text';
 import { CWTextArea } from './cw_text_area';
 import { CWThreadVoteButton } from './cw_thread_vote_button';
@@ -59,6 +58,7 @@ import { CWCircleButton } from './new_designs/CWCircleButton/CWCircleButton';
 import CWDrawer from './new_designs/CWDrawer';
 import { CWForm } from './new_designs/CWForm';
 import CWIconButton from './new_designs/CWIconButton';
+import CWLoadingSpinner from './new_designs/CWLoadingSpinner';
 import { CWModal, CWModalBody, CWModalHeader } from './new_designs/CWModal';
 import { ModalSize } from './new_designs/CWModal/CWModal';
 import { CWRelatedCommunityCard } from './new_designs/CWRelatedCommunityCard';
@@ -1095,7 +1095,7 @@ export const ComponentShowcase = () => {
       </div>
       <div className="basic-gallery">
         <CWText type="h3">Spinner</CWText>
-        <CWSpinner />
+        <CWLoadingSpinner />
       </div>
       <div className="basic-gallery">
         <CWText type="h3">Breadcrumbs</CWText>

diff --git a/...es/commonwealth/client/scripts/views/components/component_kit/cw_cover_image_uploader.tsx b/...es/commonwealth/client/scripts/views/components/component_kit/cw_cover_image_uploader.tsx
@@ -13,11 +13,11 @@ import { useFormContext } from 'react-hook-form';
 import { compressImage } from 'utils/ImageCompression';
 import { CWIcon } from './cw_icons/cw_icon';
 import { CWRadioGroup } from './cw_radio_group';
-import { CWSpinner } from './cw_spinner';
 import { CWText } from './cw_text';
 import { CWTextInput, MessageRow } from './cw_text_input';
 import type { ValidationStatus } from './cw_validation_text';
 import { getClasses } from './helpers';
+import CWLoadingSpinner from './new_designs/CWLoadingSpinner';
 import { MessageRow as NewMessageRow } from './new_designs/CWTextInput/MessageRow';
 
 // TODO: currently it doesn't support "edit more", i.e if we set url in CWForm "initialValues", this component won't
@@ -382,7 +382,7 @@ export const CWCoverImageUploader = ({
               />
             </div>
             {isGenerating ? (
-              <CWSpinner size="large" />
+              <CWLoadingSpinner center />
             ) : (
               <>
                 <CWTextInput
@@ -423,7 +423,7 @@ export const CWCoverImageUploader = ({
           className="pseudo-input"
           ref={pseudoInput}
         />
-        {isUploading && <CWSpinner size="large" />}
+        {isUploading && <CWLoadingSpinner center />}
         <div className="attach-btn" ref={attachButton}>
           {imageURL && defaultImageBehaviour === ImageBehavior.Circle && (
             <img className="circle-img" src={imageURL} />

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_query_list.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_query_list.tsx
@@ -1,10 +1,8 @@
+import 'components/component_kit/cw_query_list.scss';
 import React from 'react';
 import type { Components, ItemContent } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
-
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
-
-import 'components/component_kit/cw_query_list.scss';
+import CWLoadingSpinner from './new_designs/CWLoadingSpinner';
 
 interface QueryListProps<ListItem> {
   loading: boolean;
@@ -22,7 +20,7 @@ export const QueryList = <T,>({
   return (
     <div className="QueryList">
       {loading ? (
-        <CWSpinner />
+        <CWLoadingSpinner />
       ) : (
         <Virtuoso
           data={options}

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_spinner.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_spinner.tsx
diff --git a/packages/commonwealth/client/scripts/views/components/edit_profile.tsx b/packages/commonwealth/client/scripts/views/components/edit_profile.tsx
@@ -21,9 +21,9 @@ import { CWDivider } from './component_kit/cw_divider';
 import { CWForm } from './component_kit/cw_form';
 import { CWFormSection } from './component_kit/cw_form_section';
 import { CWSocials } from './component_kit/cw_socials';
-import { CWSpinner } from './component_kit/cw_spinner';
 import { CWText } from './component_kit/cw_text';
 import { CWTextInput } from './component_kit/cw_text_input';
+import CWLoadingSpinner from './component_kit/new_designs/CWLoadingSpinner';
 import { LinkedAddresses } from './linked_addresses';
 import { ReactQuillEditor, createDeltaFromText } from './react_quill_editor';
 import { deserializeDelta, serializeDelta } from './react_quill_editor/utils';
@@ -202,7 +202,7 @@ const EditProfileComponent = () => {
     return (
       <div className="EditProfile full-height">
         <div className="loading-spinner">
-          <CWSpinner />
+          <CWLoadingSpinner center />
         </div>
       </div>
     );

diff --git a/...nwealth/client/scripts/views/modals/SessionRevalidationModal/SessionRevalidationModal.tsx b/...nwealth/client/scripts/views/modals/SessionRevalidationModal/SessionRevalidationModal.tsx
@@ -10,7 +10,6 @@ import app from 'state';
 import _ from 'underscore';
 import { CWAuthButton } from 'views/components/component_kit/CWAuthButtonOld';
 import { CWButton } from 'views/components/component_kit/cw_button';
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTextInput } from 'views/components/component_kit/cw_text_input';
 import { CWWalletsList } from 'views/components/component_kit/cw_wallets_list';
@@ -20,6 +19,7 @@ import {
 } from 'views/components/component_kit/new_designs/CWModal';
 import { formatAddress } from 'views/components/user/user_block';
 import { openConfirmation } from 'views/modals/confirmation_modal';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import './SessionRevalidationModal.scss';
 
 interface SessionRevalidationModalProps {
@@ -139,7 +139,7 @@ const SessionRevalidationModal = ({
                   onenterkey={onEmailLogin}
                 />
               ) : (
-                <CWSpinner />
+                <CWLoadingSpinner center />
               )}
               <div className="buttons-row">
                 <CWButton

diff --git a/packages/commonwealth/client/scripts/views/pages/AdminPanel/Analytics.tsx b/packages/commonwealth/client/scripts/views/pages/AdminPanel/Analytics.tsx
@@ -5,10 +5,10 @@ import 'pages/AdminPanel.scss';
 import React, { useState } from 'react';
 import app from 'state';
 import { CWButton } from '../../components/component_kit/cw_button';
-import { CWSpinner } from '../../components/component_kit/cw_spinner';
 import { CWText } from '../../components/component_kit/cw_text';
 import { CWTextInput } from '../../components/component_kit/cw_text_input';
 import { ValidationStatus } from '../../components/component_kit/cw_validation_text';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 
 type Stats = {
   numCommentsLastMonth: number;
@@ -102,7 +102,7 @@ const Analytics = () => {
   return (
     <div className="Analytics">
       {!initialized ? (
-        <CWSpinner />
+        <CWLoadingSpinner center />
       ) : (
         <>
           <div className="AnalyticsSection">

diff --git a/packages/commonwealth/client/scripts/views/pages/DirectoryPage/DirectoryPageContent.tsx b/packages/commonwealth/client/scripts/views/pages/DirectoryPage/DirectoryPageContent.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWRelatedCommunityCard } from 'views/components/component_kit/new_designs/CWRelatedCommunityCard';
 import { CWTable } from 'views/components/component_kit/new_designs/CWTable';
 import { ViewType } from 'views/pages/DirectoryPage/useDirectoryPageData';
-
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import './DirectoryPageContent.scss';
 
 type RowType = {
@@ -80,7 +79,7 @@ const DirectoryPageContent = ({
   if (isLoading) {
     return (
       <div className="directory-loader-container">
-        <CWSpinner size="large" />
+        <CWLoadingSpinner center />
       </div>
     );
   }

diff --git a/packages/commonwealth/client/scripts/views/pages/general_contract/index.tsx b/packages/commonwealth/client/scripts/views/pages/general_contract/index.tsx
@@ -14,11 +14,11 @@ import 'pages/general_contract/index.scss';
 import React, { useEffect, useRef, useState } from 'react';
 import app from 'state';
 import { CWButton } from 'views/components/component_kit/cw_button';
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTextInput } from 'views/components/component_kit/cw_text_input';
 import type { AbiInput, AbiItem, AbiOutput } from 'web3-utils/types';
 import type Contract from '../../../models/Contract';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import { PageNotFound } from '../404';
 import { PageLoading } from '../loading';
 
@@ -183,7 +183,7 @@ const GeneralContractPage = ({ contractAddress }: GeneralContractPageProps) => {
                         <CWText>{output.name}</CWText>
                       </div>
                       <div>
-                        {loading && <CWSpinner />}
+                        {loading && <CWLoadingSpinner center />}
                         <CWText>
                           {fnOutputArray && fnOutputArray[i].toString()
                             ? fnOutputArray[i].toString()

diff --git a/packages/commonwealth/client/scripts/views/pages/loading.tsx b/packages/commonwealth/client/scripts/views/pages/loading.tsx
@@ -1,7 +1,7 @@
 import 'pages/loading.scss';
 import React from 'react';
-import { CWSpinner } from '../components/component_kit/cw_spinner';
 import { CWText } from '../components/component_kit/cw_text';
+import CWLoadingSpinner from '../components/component_kit/new_designs/CWLoadingSpinner';
 
 type PageLoadingProps = {
   message?: string;
@@ -13,7 +13,7 @@ export const PageLoading = (props: PageLoadingProps) => {
   return (
     <div className="LoadingPage">
       <div className="inner-content">
-        <CWSpinner size="xl" />
+        <CWLoadingSpinner center />
         <CWText>{message}</CWText>
       </div>
     </div>

diff --git a/packages/commonwealth/client/scripts/views/pages/login/login_desktop.tsx b/packages/commonwealth/client/scripts/views/pages/login/login_desktop.tsx
@@ -11,11 +11,11 @@ import {
   CWProfileRow,
   CWProfilesList,
 } from 'views/components/component_kit/cw_profiles_list';
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTextInput } from 'views/components/component_kit/cw_text_input';
 import { CWWalletsList } from 'views/components/component_kit/cw_wallets_list';
 
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import { LoginBoilerplate } from './login_boilerplate';
 import { LoginDesktopSidebar } from './login_desktop_sidebar';
 import type { LoginProps } from './types';
@@ -125,7 +125,7 @@ export const LoginDesktop = ({
                 </div>
               </div>
             ) : (
-              <CWSpinner />
+              <CWLoadingSpinner center />
             )}
             <div className="header-container">
               <LoginBoilerplate />

diff --git a/packages/commonwealth/client/scripts/views/pages/login/login_mobile.tsx b/packages/commonwealth/client/scripts/views/pages/login/login_mobile.tsx
@@ -12,11 +12,11 @@ import {
   CWProfileRow,
   CWProfilesList,
 } from 'views/components/component_kit/cw_profiles_list';
-import { CWSpinner } from 'views/components/component_kit/cw_spinner';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTextInput } from 'views/components/component_kit/cw_text_input';
 import { CWWalletsList } from 'views/components/component_kit/cw_wallets_list';
 import { isWindowExtraSmall } from 'views/components/component_kit/helpers';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import { getLoginText } from './helpers';
 import { LoginBoilerplate } from './login_boilerplate';
 import { LoginEthAlert } from './login_eth_alert';
@@ -198,7 +198,7 @@ export const LoginMobile = ({
                 </div>
               </div>
             ) : (
-              <CWSpinner />
+              <CWLoadingSpinner center />
             )}
           </div>
         )}

diff --git a/...ages/commonwealth/client/scripts/views/pages/manage_community/community_metadata_rows.tsx b/...ages/commonwealth/client/scripts/views/pages/manage_community/community_metadata_rows.tsx
@@ -16,9 +16,9 @@ import { AvatarUpload } from '../../components/Avatar';
 import { CWButton } from '../../components/component_kit/cw_button';
 import { CWIcon } from '../../components/component_kit/cw_icons/cw_icon';
 import { CWLabel } from '../../components/component_kit/cw_label';
-import { CWSpinner } from '../../components/component_kit/cw_spinner';
 import { CWText } from '../../components/component_kit/cw_text';
 import { CWToggle } from '../../components/component_kit/cw_toggle';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import DirectoryPageSection from './DirectoryPageSection';
 import { DiscordForumConnections } from './DiscordForumConnections';
 import { getCommunityTags, setCommunityCategories } from './helpers';
@@ -586,7 +586,7 @@ export const CommunityMetadataRows = ({
           <>
             <div className="settings-row">
               <div className="spinner-group">
-                <CWSpinner />
+                <CWLoadingSpinner center />
                 <CWText>Connecting...</CWText>
               </div>
               <CWText>Refresh to check if connection succeeded</CWText>

diff --git a/packages/commonwealth/client/scripts/views/pages/new_snapshot_proposal/index.tsx b/packages/commonwealth/client/scripts/views/pages/new_snapshot_proposal/index.tsx
@@ -14,9 +14,9 @@ import { useLocation } from 'react-router';
 import app from 'state';
 import { CWButton } from 'views/components/component_kit/new_designs/cw_button';
 import { MixpanelSnapshotEvents } from '../../../../../shared/analytics/types';
-import { CWSpinner } from '../../components/component_kit/cw_spinner';
 import { CWText } from '../../components/component_kit/cw_text';
 import { CWTextInput } from '../../components/component_kit/cw_text_input';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import {
   ReactQuillEditor,
   createDeltaFromText,
@@ -213,7 +213,7 @@ export const NewSnapshotProposalForm = ({
     <div className="NewSnapshotProposalForm">
       {loading ? (
         <div className="proposal-loading">
-          <CWSpinner />
+          <CWLoadingSpinner center />
         </div>
       ) : (
         <>

diff --git a/...ges/commonwealth/client/scripts/views/pages/notifications/notification_row_components.tsx b/...ges/commonwealth/client/scripts/views/pages/notifications/notification_row_components.tsx
@@ -16,8 +16,8 @@ import { Label as ChainEventLabel } from '../../../../../shared/chain/labelers/u
 import type { CWEvent } from '../../../../../shared/chain/types/types';
 import AddressInfo from '../../../models/AddressInfo';
 import { CWIconButton } from '../../components/component_kit/cw_icon_button';
-import { CWSpinner } from '../../components/component_kit/cw_spinner';
 import { getClasses } from '../../components/component_kit/helpers';
+import CWLoadingSpinner from '../../components/component_kit/new_designs/CWLoadingSpinner';
 import { UserGallery } from '../../components/user/user_gallery';
 import { getBatchNotificationFields } from './helpers';
 import type { NotificationRowProps } from './notification_row';
@@ -218,7 +218,7 @@ export const DefaultNotificationRow = (props: ExtendedNotificationRowProps) => {
                   });
               }}
             >
-              {markingRead ? <CWSpinner size="small" /> : 'Mark as read'}
+              {markingRead ? <CWLoadingSpinner /> : 'Mark as read'}
             </div>
           )}
         </div>
@@ -289,7 +289,7 @@ export const SnapshotNotificationRow = (
                   });
               }}
             >
-              {markingRead ? <CWSpinner size="small" /> : 'Mark as read'}
+              {markingRead ? <CWLoadingSpinner /> : 'Mark as read'}
             </div>
           )}
         </div>