replaced custom with sl loader

stream-labs · Dec 17, 2024 · df4d4d6 · df4d4d6
1 parent efc54a8
commit df4d4d6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 29 deletions.
diff --git a/app/components-react/highlighter/StreamCard.m.less b/app/components-react/highlighter/StreamCard.m.less
@@ -95,24 +95,6 @@
   z-index: 1;
 }
 
-.loader {
-  border: 2px solid #f3f3f3; /* Light grey */
-  border-top: 2px solid #3e3e3e; /* Blue */
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .delete-button {
   display: flex;
   top: 8px;

diff --git a/app/components-react/highlighter/StreamCard.tsx b/app/components-react/highlighter/StreamCard.tsx
@@ -185,21 +185,29 @@ function ActionBar({
         <Button
           size="large"
           type="primary"
-          icon={
-            clipsOfStreamAreLoading !== stream.id ? (
-              <i className="icon-download" style={{ marginRight: '4px' }} />
-            ) : undefined
-          }
           onClick={e => {
             emitExportVideo();
             e.stopPropagation();
           }}
+          style={{ display: 'grid', gridTemplateAreas: 'stack' }}
         >
-          {clipsOfStreamAreLoading === stream.id ? (
-            <div className={styles.loader}></div>
-          ) : (
-            <> {$t('Export highlight reel')}</>
-          )}
+          <div
+            style={{
+              visibility: clipsOfStreamAreLoading === stream.id ? 'visible' : 'hidden',
+              gridArea: 'stack',
+            }}
+          >
+            <i className="fa fa-spinner fa-pulse" />
+          </div>
+          <span
+            style={{
+              visibility: clipsOfStreamAreLoading !== stream.id ? 'visible' : 'hidden',
+              gridArea: 'stack',
+            }}
+          >
+            <i className="icon-download" style={{ marginRight: '4px' }} />
+            {$t('Export highlight reel')}
+          </span>
         </Button>
       </div>
     );
@@ -255,7 +263,7 @@ export function Thumbnail({
 }) {
   function getThumbnailText(state: EAiDetectionState): JSX.Element | string {
     if (clipsOfStreamAreLoading === stream?.id) {
-      return <div className={styles.loader}></div>;
+      return <i className="fa fa-spinner fa-pulse" style={{ marginLeft: 8 }} />;
     }
 
     if (clips.length > 0) {