make the DL spinner a styled component

stylesheets/_modules.scss

@@ -1359,96 +1359,6 @@
   @include color-svg('../images/x-16.svg', $color-gray-60);
 }
 
-// Module: Spinner
-
-.module-spinner__container {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  position: relative;
-  height: 56px;
-  width: 56px;
-}
-
-.module-spinner__circle {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  @include color-svg('../images/spinner-track-56.svg', $color-white-04);
-  z-index: 2;
-  height: 56px;
-  width: 56px;
-}
-.module-spinner__arc {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  @include color-svg('../images/spinner-56.svg', var(--color-text));
-
-  z-index: 3;
-  height: 56px;
-  width: 56px;
-
-  animation: spinner-arc-animation 1000ms linear infinite;
-}
-
-@keyframes spinner-arc-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// In these --small and --mini sizes, we're exploding our @color-svg mixin so we don't
-//   have to duplicate our background colors for the dark/ios/size matrix.
-
-.module-spinner__container--small {
-  height: 24px;
-  width: 24px;
-}
-.module-spinner__circle--small {
-  -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center;
-  -webkit-mask-size: 100%;
-  height: 24px;
-  width: 24px;
-}
-.module-spinner__arc--small {
-  -webkit-mask: url('../images/spinner-24.svg') no-repeat center;
-  -webkit-mask-size: 100%;
-  height: 24px;
-  width: 24px;
-}
-
-.module-spinner__container--mini {
-  height: 14px;
-  width: 14px;
-}
-.module-spinner__circle--mini {
-  -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center;
-  -webkit-mask-size: 100%;
-  height: 14px;
-  width: 14px;
-}
-.module-spinner__arc--mini {
-  -webkit-mask: url('../images/spinner-24.svg') no-repeat center;
-  -webkit-mask-size: 100%;
-  height: 14px;
-  width: 14px;
-}
-
-.module-spinner__circle--incoming {
-  background-color: rgba(var(--color-received-message-text), 0.2);
-}
-
-.module-spinner__circle--outgoing {
-  background-color: rgba(var(--color-sent-message-text), 0.2);
-}
 
 // Module: Search Results
 

stylesheets/_theme_dark.scss

@@ -405,10 +405,6 @@
 
   // Module: Spinner
 
-  .module-spinner__circle {
-    background-color: $color-white-04;
-  }
-
   .module-search-results__conversations-header {
     color: $color-gray-05;
   }

ts/components/basic/Spinner.tsx

@@ -1,41 +1,87 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled from 'styled-components';
 
-interface Props {
-  size: 'small' | 'mini' | 'normal';
+type Props = {
+  size: 'small' | 'normal';
   direction?: string;
-}
+};
 
-export class Spinner extends React.Component<Props> {
-  public render() {
-    const { size, direction } = this.props;
+// Module: Spinner
 
+const spinner56Path =
+  'M52.3599009,14.184516 C54.6768062,18.2609741 56,22.9759628 56,28 C56,43.463973 43.463973,56 28,56 L28,54 C42.3594035,54 54,42.3594035 54,28 C54,23.3403176 52.7742128,18.9669331 50.6275064,15.1847144 L52.3599009,14.184516 Z';
+
+const spinner24Path =
+  'M22.5600116,6.29547931 C23.4784938,7.99216184 24,9.93517878 24,12 C24,18.627417 18.627417,24 12,24 L12,22 C17.5228475,22 22,17.5228475 22,12 C22,10.2995217 21.5755584,8.6981771 20.8268371,7.29612807 L22.5600116,6.29547931 Z';
+
+const SpinnerArc = styled.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: none;
+  z-index: 3;
+  height: 56px;
+  width: 56px;
+
+  animation: spinner-arc-animation 3000ms linear infinite;
+  animation-play-state: inherit;
+
+  @keyframes spinner-arc-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const SpinnerContainer = styled.div`
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  position: relative;
+  height: 56px;
+  width: 56px;
+
+  /* :hover {
+    animation-play-state: running;
+  }
+  animation-play-state: paused;
+  */
+  animation-play-state: running;
+`;
+
+const SpinnerContainerSmall = styled(SpinnerContainer)`
+  height: 24px;
+  width: 24px;
+`;
+
+const SpinnerArcSmall = styled(SpinnerArc)`
+  height: 24px;
+  width: 24px;
+`;
+
+export const Spinner = (props: Props) => {
+  const { size } = props;
+
+  if (size === 'small') {
     return (
-      <div
-        className={classNames(
-          'module-spinner__container',
-          `module-spinner__container--${size}`,
-          direction ? `module-spinner__container--${direction}` : null,
-          direction ? `module-spinner__container--${size}-${direction}` : null
-        )}
-      >
-        <div
-          className={classNames(
-            'module-spinner__circle',
-            `module-spinner__circle--${size}`,
-            direction ? `module-spinner__circle--${direction}` : null,
-            direction ? `module-spinner__circle--${size}-${direction}` : null
-          )}
-        />
-        <div
-          className={classNames(
-            'module-spinner__arc',
-            `module-spinner__arc--${size}`,
-            direction ? `module-spinner__arc--${direction}` : null,
-            direction ? `module-spinner__arc--${size}-${direction}` : null
-          )}
-        />
-      </div>
+      <SpinnerContainerSmall>
+        <SpinnerArcSmall>
+          <path d={spinner24Path} />
+        </SpinnerArcSmall>
+      </SpinnerContainerSmall>
     );
   }
-}
+
+  return (
+    <SpinnerContainer>
+      <SpinnerArc>
+        <path d={spinner56Path} />
+      </SpinnerArc>
+    </SpinnerContainer>
+  );
+};

ts/components/conversation/Image.tsx

@@ -94,6 +94,8 @@ export const Image = (props: Props) => {
           style={{
             maxHeight: `${height}px`,
             maxWidth: `${width}px`,
+            width: `${width}px`,
+            height: `${height}px`,
             lineHeight: `${height}px`,
             textAlign: 'center',
           }}

ts/components/conversation/message/message-content/MessageAttachment.tsx

@@ -155,7 +155,7 @@ export const MessageAttachment = (props: Props) => {
       <div className={classNames('module-message__generic-attachment')}>
         {pending ? (
           <div className="module-message__generic-attachment__spinner-container">
-            <Spinner size="small" direction={direction} />
+            <Spinner size="small" />
           </div>
         ) : (
           <div className="module-message__generic-attachment__icon-container">

ts/receiver/receiver.ts

@@ -262,7 +262,7 @@ export async function handleOpenGroupV2Message(
   const { base64EncodedData, sentTimestamp, sender, serverId } = message;
   const { serverUrl, roomId } = roomInfos;
   if (!base64EncodedData || !sentTimestamp || !sender || !serverId) {
-    window?.log?.warn('Invalid data passed to handleMessageEvent.', message);
+    window?.log?.warn('Invalid data passed to handleOpenGroupV2Message.', message);
     return;
   }