Adjust Spinner (using sui Loader) (#2518)

packages/react-components/src/Popup.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import { Popup as SUIPopup } from 'semantic-ui-react';
+import SUIPopup from 'semantic-ui-react/dist/commonjs/modules/Popup/Popup';
 
 interface Props {
   children: React.ReactNode;

packages/react-components/src/Spinner.tsx

@@ -2,7 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useMemo } from 'react';
+import React from 'react';
+import Loader from 'semantic-ui-react/dist/commonjs/elements/Loader/Loader';
 import styled from 'styled-components';
 
 import { useTranslation } from './translate';
@@ -15,109 +16,28 @@ interface Props {
 
 function Spinner ({ className, label, variant = 'app' }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const strokeWidth = useMemo(
-    () => variant === 'app' ? 2 : 4,
-    [variant]
-  );
 
   return (
     <div className={`${className} ui--Spinner ${variant}`}>
-      <div className='loader'>
-        <svg
-          className='circular ui--highlight--stroke'
-          viewBox='25 25 50 50'
-        >
-          <circle
-            className='path'
-            cx='50'
-            cy='50'
-            fill='none'
-            r='20'
-            strokeMiterlimit='10'
-            strokeWidth={strokeWidth}
-          />
-        </svg>
-      </div>
-      {variant === 'app' && (
-        <div className='text'>{label || t('Retrieving data')}</div>
-      )}
+      <Loader
+        active
+        className='ui--highlight--spinner'
+        indeterminate
+        inline='centered'
+        size='medium'
+      >
+        {variant === 'app' && (
+          label || t('Retrieving data')
+        )}
+      </Loader>
     </div>
   );
 }
 
 export default React.memo(styled(Spinner)`
-  .loader {
-    position: relative;
-    margin: 0 auto;
-    width: 56px;
-
-    &:before {
-      content: '';
-      display: block;
-      padding-top: 100%;
-    }
-  }
-
   .text {
-    margin: 0.25rem auto 1.5rem auto;
+    margin: 0 auto 1.5rem auto;
     opacity: 0.6;
     text-align: center;
   }
-
-  .circular {
-    animation: rotate 2s linear infinite;
-    height: 100%;
-    transform-origin: center center;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-
-  .path {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-    animation: dash 1.5s ease-in-out infinite;
-    stroke-linecap: round;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -35px;
-    }
-    100% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -124px;
-    }
-  }
-
-  &.mini {
-    .loader {
-      width: 22px;
-    }
-  }
-
-  &.push {
-    .loader {
-      width: 40px;
-    }
-
-    .circular {
-      stroke: #eee !important;
-    }
-  }
 `);

packages/react-components/src/Tag.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState } from 'react';
-import { Label } from 'semantic-ui-react';
+import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
 import styled from 'styled-components';
 
 import Tooltip from './Tooltip';

packages/react-components/src/styles/index.ts

@@ -51,6 +51,12 @@ export default createGlobalStyle<Props>`
     }
   }
 
+  .ui--highlight--spinner {
+    &:after {
+      border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} transparent transparent !important;
+    }
+  }
+
   .ui--highlight--stroke {
     stroke: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
   }