diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index b8278f858..744417bf1 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -444,64 +444,6 @@ label {
   }
 }
 
-.session-loader {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-  flex-shrink: 0;
-
-  div {
-    position: absolute;
-    top: 33px;
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
-    background: var(--primary-color);
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-  }
-  div:nth-child(1) {
-    left: 8px;
-    animation: session-loader1 0.6s infinite;
-  }
-  div:nth-child(2) {
-    left: 8px;
-    animation: session-loader2 0.6s infinite;
-  }
-  div:nth-child(3) {
-    left: 32px;
-    animation: session-loader2 0.6s infinite;
-  }
-  div:nth-child(4) {
-    left: 56px;
-    animation: session-loader3 0.6s infinite;
-  }
-  @keyframes session-loader1 {
-    0% {
-      transform: scale(0);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-  @keyframes session-loader3 {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0);
-    }
-  }
-  @keyframes session-loader2 {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(24px, 0);
-    }
-  }
-}
-
 .session-settings {
   width: 100%;
   height: 100%;
diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx
index 8e8fa356a..290a21638 100644
--- a/ts/components/SessionPasswordPrompt.tsx
+++ b/ts/components/SessionPasswordPrompt.tsx
@@ -12,8 +12,8 @@ import { switchPrimaryColorTo } from '../themes/switchPrimaryColor';
 import { switchThemeTo } from '../themes/switchTheme';
 import { SessionToastContainer } from './SessionToastContainer';
 import { SessionWrapperModal } from './SessionWrapperModal';
-import { SessionSpinner } from './basic/SessionSpinner';
 import { SessionToast } from './basic/SessionToast';
+import { SessionSpinner } from './loading';
 
 interface State {
   errorCount: number;
diff --git a/ts/components/basic/SessionSpinner.tsx b/ts/components/basic/SessionSpinner.tsx
deleted file mode 100644
index 3318addec..000000000
--- a/ts/components/basic/SessionSpinner.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-type Props = {
-  loading: boolean;
-};
-
-export const SessionSpinner = (props: Props) => {
-  const { loading } = props;
-
-  return loading ? (
-    <div className="session-loader" data-testid="loading-spinner">
-      <div />
-      <div />
-      <div />
-      <div />
-    </div>
-  ) : null;
-};
diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx
index 737b69ee6..d9c0e5831 100644
--- a/ts/components/calling/InConversationCallContainer.tsx
+++ b/ts/components/calling/InConversationCallContainer.tsx
@@ -21,7 +21,7 @@ import { useVideoCallEventsListener } from '../../hooks/useVideoEventListener';
 import { DEVICE_DISABLED_DEVICE_ID } from '../../session/utils/calling/CallManager';
 import { CallWindowControls } from './CallButtons';
 
-import { SessionSpinner } from '../basic/SessionSpinner';
+import { SessionSpinner } from '../loading';
 
 const VideoContainer = styled.div`
   height: 100%;
diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx
index 7dd42eea1..07ee2e577 100644
--- a/ts/components/conversation/Image.tsx
+++ b/ts/components/conversation/Image.tsx
@@ -6,7 +6,7 @@ import { isNumber } from 'lodash';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
-import { Spinner } from '../basic/Spinner';
+import { Spinner } from '../loading';
 
 type Props = {
   alt: string;
diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx
index da7fc9f60..1438becc5 100644
--- a/ts/components/conversation/SessionConversation.tsx
+++ b/ts/components/conversation/SessionConversation.tsx
@@ -56,7 +56,7 @@ import { ConversationHeaderWithDetails } from './header/ConversationHeader';
 import { isAudio } from '../../types/MIME';
 import { HTMLDirection } from '../../util/i18n';
 import { NoticeBanner } from '../NoticeBanner';
-import { SessionSpinner } from '../basic/SessionSpinner';
+import { SessionSpinner } from '../loading';
 import { RightPanel, StyledRightPanelContainer } from './right-panel/RightPanel';
 
 const DEFAULT_JPEG_QUALITY = 0.85;
diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx
index c7c9e0282..64d51fced 100644
--- a/ts/components/conversation/StagedLinkPreview.tsx
+++ b/ts/components/conversation/StagedLinkPreview.tsx
@@ -5,8 +5,8 @@ import { Image } from './Image';
 import { fromArrayBufferToBase64 } from '../../session/utils/String';
 import { isImage } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIconButton } from '../icon';
+import { SessionSpinner } from '../loading';
 import { StagedLinkPreviewImage } from './composition/CompositionBox';
 
 type Props = {
diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx
index 71a9f581e..8452a5d36 100644
--- a/ts/components/conversation/message/message-content/MessageAttachment.tsx
+++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx
@@ -28,7 +28,7 @@ import {
   isVideo,
 } from '../../../../types/Attachment';
 import { saveAttachmentToDisk } from '../../../../util/attachmentsUtil';
-import { Spinner } from '../../../basic/Spinner';
+import { Spinner } from '../../../loading';
 import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
 import { ImageGrid } from '../../ImageGrid';
 import { LightBoxOptions } from '../../SessionConversation';
diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx
index 00babe4e9..6d9ada429 100644
--- a/ts/components/dialog/BanOrUnbanUserDialog.tsx
+++ b/ts/components/dialog/BanOrUnbanUserDialog.tsx
@@ -17,8 +17,8 @@ import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerSM } from '../basic/Text';
+import { SessionSpinner } from '../loading';
 
 async function banOrUnBanUserCall(
   convo: ConversationModel,
diff --git a/ts/components/dialog/DeleteAccountModal.tsx b/ts/components/dialog/DeleteAccountModal.tsx
index f318ff05e..29b99cd54 100644
--- a/ts/components/dialog/DeleteAccountModal.tsx
+++ b/ts/components/dialog/DeleteAccountModal.tsx
@@ -6,8 +6,8 @@ import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/sync/sync
 import { updateConfirmModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
+import { SessionSpinner } from '../loading';
 
 import { Data } from '../../data/data';
 import { deleteAllLogs } from '../../node/logs';
diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx
index 099db6d81..12073c9f7 100644
--- a/ts/components/dialog/EditProfileDialog.tsx
+++ b/ts/components/dialog/EditProfileDialog.tsx
@@ -18,8 +18,8 @@ import { saveQRCode } from '../../util/saveQRCode';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIconButton } from '../icon';
+import { SessionSpinner } from '../loading';
 
 const handleSaveQRCode = (event: MouseEvent) => {
   event.preventDefault();
diff --git a/ts/components/dialog/EditProfilePictureModal.tsx b/ts/components/dialog/EditProfilePictureModal.tsx
index 0f684e723..d19811f22 100644
--- a/ts/components/dialog/EditProfilePictureModal.tsx
+++ b/ts/components/dialog/EditProfilePictureModal.tsx
@@ -7,9 +7,9 @@ import { editProfileModal, updateEditProfilePictureModel } from '../../state/duc
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
 import { SessionIconButton } from '../icon';
+import { SessionSpinner } from '../loading';
 import { ProfileAvatar } from './EditProfileDialog';
 
 const StyledAvatarContainer = styled.div`
diff --git a/ts/components/dialog/ModeratorsAddDialog.tsx b/ts/components/dialog/ModeratorsAddDialog.tsx
index 02feea9b6..58e906f44 100644
--- a/ts/components/dialog/ModeratorsAddDialog.tsx
+++ b/ts/components/dialog/ModeratorsAddDialog.tsx
@@ -11,7 +11,7 @@ import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
+import { SessionSpinner } from '../loading';
 
 type Props = {
   conversationId: string;
diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx
index 0a0b3496f..d32c74e6e 100644
--- a/ts/components/dialog/ModeratorsRemoveDialog.tsx
+++ b/ts/components/dialog/ModeratorsRemoveDialog.tsx
@@ -13,7 +13,7 @@ import { updateRemoveModeratorsModal } from '../../state/ducks/modalDialog';
 import { MemberListItem } from '../MemberListItem';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
+import { SessionSpinner } from '../loading';
 
 type Props = {
   conversationId: string;
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
index cb206b64f..5a47d799b 100644
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -16,9 +16,9 @@ import {
 } from '../../state/selectors/onions';
 import { Flex } from '../basic/Flex';
 
-import { SessionSpinner } from '../basic/SessionSpinner';
-import { SessionIcon, SessionIconButton } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { SessionIcon, SessionIconButton } from '../icon';
+import { SessionSpinner } from '../loading';
 
 export type StatusLightType = {
   glowStartDelay: number;
diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx
index 836eee83e..3c8db836d 100644
--- a/ts/components/dialog/ReactClearAllModal.tsx
+++ b/ts/components/dialog/ReactClearAllModal.tsx
@@ -8,7 +8,7 @@ import { updateReactClearAllModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
+import { SessionSpinner } from '../loading';
 
 type Props = {
   reaction: string;
diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx
index 9215075b1..2cdb31144 100644
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/ts/components/dialog/SessionConfirm.tsx
@@ -13,9 +13,9 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
+import { SessionSpinner } from '../loading';
 
 const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
   font-size: var(--font-size-md);
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 5c88da760..35281d215 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { SessionSpinner } from '../../basic/SessionSpinner';
+import { SessionSpinner } from '../../loading';
 import { MemberListItem } from '../../MemberListItem';
 import { OverlayHeader } from './OverlayHeader';
 
diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx
index 6d8cf4d9d..284cc984a 100644
--- a/ts/components/leftpane/overlay/OverlayCommunity.tsx
+++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx
@@ -14,7 +14,7 @@ import { ToastUtils } from '../../../session/utils';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { SessionSpinner } from '../../basic/SessionSpinner';
+import { SessionSpinner } from '../../loading';
 import { OverlayHeader } from './OverlayHeader';
 
 import {
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index ddaa78a06..8651c4a62 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessage.tsx
@@ -11,7 +11,7 @@ import { openConversationWithMessages } from '../../../state/ducks/conversations
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { SessionSpinner } from '../../basic/SessionSpinner';
+import { SessionSpinner } from '../../loading';
 import { OverlayHeader } from './OverlayHeader';
 
 import { ONSResolve } from '../../../session/apis/snode_api/onsResolve';
diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
index e7e6ca22b..7bd08775f 100644
--- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
+++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
@@ -9,8 +9,8 @@ import { StateType } from '../../../state/reducer';
 import { Avatar, AvatarSize } from '../../avatar/Avatar';
 import { Flex } from '../../basic/Flex';
 import { PillContainerHoverable, StyledPillContainerHoverable } from '../../basic/PillContainer';
-import { SessionSpinner } from '../../basic/SessionSpinner';
 import { H3 } from '../../basic/Text';
+import { SessionSpinner } from '../../loading';
 
 export type JoinableRoomProps = {
   completeUrl: string;
diff --git a/ts/components/loading/index.tsx b/ts/components/loading/index.tsx
new file mode 100644
index 000000000..b2fffa50d
--- /dev/null
+++ b/ts/components/loading/index.tsx
@@ -0,0 +1,4 @@
+import { SessionSpinner } from './spinner/SessionSpinner';
+import { Spinner } from './spinner/Spinner';
+
+export { SessionSpinner, Spinner };
diff --git a/ts/components/loading/spinner/SessionSpinner.tsx b/ts/components/loading/spinner/SessionSpinner.tsx
new file mode 100644
index 000000000..2b57cc99a
--- /dev/null
+++ b/ts/components/loading/spinner/SessionSpinner.tsx
@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+type Props = {
+  loading: boolean;
+};
+
+const StyledSessionSpinner = styled.div`
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+
+  div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  div:nth-child(1) {
+    left: 8px;
+    animation: session-loader1 0.6s infinite;
+  }
+  div:nth-child(2) {
+    left: 8px;
+    animation: session-loader2 0.6s infinite;
+  }
+  div:nth-child(3) {
+    left: 32px;
+    animation: session-loader2 0.6s infinite;
+  }
+  div:nth-child(4) {
+    left: 56px;
+    animation: session-loader3 0.6s infinite;
+  }
+  @keyframes session-loader1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes session-loader3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes session-loader2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+`;
+
+export const SessionSpinner = (props: Props) => {
+  const { loading } = props;
+
+  return loading ? (
+    <StyledSessionSpinner data-testid="loading-spinner">
+      <div />
+      <div />
+      <div />
+      <div />
+    </StyledSessionSpinner>
+  ) : null;
+};
diff --git a/ts/components/basic/Spinner.tsx b/ts/components/loading/spinner/Spinner.tsx
similarity index 100%
rename from ts/components/basic/Spinner.tsx
rename to ts/components/loading/spinner/Spinner.tsx
diff --git a/ts/components/registration/SignInTab.tsx b/ts/components/registration/SignInTab.tsx
index ea9f573ac..827f72d01 100644
--- a/ts/components/registration/SignInTab.tsx
+++ b/ts/components/registration/SignInTab.tsx
@@ -3,8 +3,8 @@ import { ToastUtils } from '../../session/utils';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
 import { SessionButton } from '../basic/SessionButton';
-import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
+import { SessionSpinner } from '../loading';
 import {
   RegistrationContext,
   RegistrationPhase,