feat: moved spinners into new loading folder

converted session-loader sass to styled components

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%;

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;

ts/components/basic/SessionSpinner.tsx

@@ -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;
-};

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%;

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;

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;

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 = {

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';

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,

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';

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();

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`

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;

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;

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;

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;

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);

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';
 

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 {

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';

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;

ts/components/loading/index.tsx

@@ -0,0 +1,4 @@
+import { SessionSpinner } from './spinner/SessionSpinner';
+import { Spinner } from './spinner/Spinner';
+
+export { SessionSpinner, Spinner };

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;
+};

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,