feat(ui-components) Create Spinner component (#13026)

Replace atlaskit Spinner with the new component
Remove @atlaskit/spinner

package-lock.json

@@ -15,7 +15,6 @@
         "@atlaskit/inline-dialog": "13.0.9",
         "@atlaskit/inline-message": "11.0.8",
         "@atlaskit/multi-select": "15.0.5",
-        "@atlaskit/spinner": "15.0.6",
         "@atlaskit/theme": "11.0.2",
         "@atlaskit/tooltip": "17.1.2",
         "@emotion/react": "11.10.0",

package.json

@@ -20,7 +20,6 @@
     "@atlaskit/inline-dialog": "13.0.9",
     "@atlaskit/inline-message": "11.0.8",
     "@atlaskit/multi-select": "15.0.5",
-    "@atlaskit/spinner": "15.0.6",
     "@atlaskit/theme": "11.0.2",
     "@atlaskit/tooltip": "17.1.2",
     "@emotion/react": "11.10.0",

react/features/base/react/components/web/LoadingIndicator.js

@@ -1,3 +1,3 @@
 /* @flow */
 
-export { default } from '@atlaskit/spinner';
+export { default } from '../../../ui/components/web/Spinner';

react/features/base/ui/components/web/Spinner.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { keyframes } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
+
+interface IProps {
+    size?: 'small' | 'medium' | 'large';
+}
+
+const SIZE = {
+    small: 16,
+    medium: 24,
+    large: 48
+};
+
+const useStyles = makeStyles()(() => {
+    return {
+        container: {
+            verticalAlign: 'middle',
+            opacity: 0,
+            animation: `${keyframes`
+                0% {
+                    transform: rotate(50deg);
+                    opacity: 0;
+                    stroke-dashoffset: 60;
+                }
+                100% {
+                    transform: rotate(230deg);
+                    opacity: 1;
+                    stroke-dashoffset: 50;
+                }
+            `} 1s forwards ease-in-out`
+        },
+
+        circle: {
+            fill: 'none',
+            stroke: '#E6EDFA',
+            strokeWidth: 1.5,
+            strokeLinecap: 'round',
+            strokeDasharray: 60,
+            strokeDashoffset: 'inherit',
+            transformOrigin: 'center',
+            animation: `${keyframes`
+                0% {
+                    transform: rotate(0);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            `} 0.86s forwards infinite`,
+            animationDelay: '0ms',
+            animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)'
+        }
+    };
+});
+
+const Spinner = ({ size = 'medium' }: IProps) => {
+    const { classes } = useStyles();
+
+    return (
+        <svg
+            className = { classes.container }
+            focusable = 'false'
+            height = { SIZE[size] }
+            viewBox = '0 0 16 16'
+            width = { SIZE[size] }
+            xmlns = 'http://www.w3.org/2000/svg'>
+            <circle
+                className = { classes.circle }
+                cx = '8'
+                cy = '8'
+                r = '7' />
+        </svg>
+    );
+};
+
+export default Spinner;

react/features/calendar-sync/components/CalendarList.web.js

@@ -1,6 +1,5 @@
 // @flow
 
-import Spinner from '@atlaskit/spinner';
 import React from 'react';
 
 import {
@@ -11,6 +10,7 @@ import { translate } from '../../base/i18n';
 import { Icon, IconCalendar } from '../../base/icons';
 import { AbstractPage } from '../../base/react';
 import { connect } from '../../base/redux';
+import Spinner from '../../base/ui/components/web/Spinner';
 import { SETTINGS_TABS, openSettingsDialog } from '../../settings';
 import { refreshCalendar } from '../actions';
 import { ERRORS } from '../constants';
@@ -177,10 +177,7 @@ class CalendarList extends AbstractPage<Props> {
         } else if (_hasIntegrationSelected && !_hasLoadedEvents) {
             return (
                 <div className = 'meetings-list-empty'>
-                    <Spinner
+                    <Spinner />
-                        invertColor = { true }
-                        isCompleting = { false }
-                        size = 'medium' />
                 </div>
             );
         }

react/features/desktop-picker/components/DesktopPickerPane.js

@@ -1,11 +1,11 @@
 /* @flow */
 
-import Spinner from '@atlaskit/spinner';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { Platform } from '../../base/react';
 import Checkbox from '../../base/ui/components/web/Checkbox';
+import Spinner from '../../base/ui/components/web/Spinner';
 
 import DesktopSourcePreview from './DesktopSourcePreview';
 
@@ -111,9 +111,7 @@ class DesktopPickerPane extends Component<Props> {
                         type = { type } />))
                 : (
                     <div className = 'desktop-picker-pane-spinner'>
-                        <Spinner
+                        <Spinner />
-                            isCompleting = { false }
-                            size = 'medium' />
                     </div>
                 );
 

react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js

@@ -1,11 +1,11 @@
 // @flow
 
-import Spinner from '@atlaskit/spinner';
 import React from 'react';
 
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
 import Dialog from '../../../../base/ui/components/web/Dialog';
+import Spinner from '../../../../base/ui/components/web/Spinner';
 import {
     GOOGLE_API_STATES,
     GoogleSignInButton,
@@ -284,11 +284,9 @@ class StartLiveStreamDialog
                         selectedBoundStreamID = { selectedBoundStreamID } />
                 );
             } else {
-                googleContent = (
+                googleContent
-                    <Spinner
+                    = <Spinner />
-                        isCompleting = { false }
+                ;
-                        size = 'medium' />
-                );
             }
 
             /**
@@ -310,11 +308,9 @@ class StartLiveStreamDialog
 
         case GOOGLE_API_STATES.NEEDS_LOADING:
         default:
-            googleContent = (
+            googleContent
-                <Spinner
+                = <Spinner />
-                    isCompleting = { false }
+            ;
-                    size = 'medium' />
-            );
 
             break;
         }

react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx

@@ -184,9 +184,7 @@ class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<IP
      */
     _renderSpinner() {
         return (
-            <LoadingIndicator
+            <LoadingIndicator size = 'small' />
-                isCompleting = { false }
-                size = 'small' />
         );
     }
 

react/features/salesforce/components/web/SalesforceLinkDialog.tsx

@@ -1,4 +1,3 @@
-import Spinner from '@atlaskit/spinner';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -10,6 +9,7 @@ import { IconSearch } from '../../../base/icons/svg';
 import { getFieldValue } from '../../../base/react/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Dialog from '../../../base/ui/components/web/Dialog';
+import Spinner from '../../../base/ui/components/web/Spinner';
 import { NOTES_MAX_LENGTH } from '../../constants';
 import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
 
@@ -165,11 +165,7 @@ function SalesforceLinkDialog() {
 
     const renderSpinner = () => (
         <div className = { classes.spinner }>
-            <Spinner
+            <Spinner />
-
-                // @ts-ignore
-                isCompleting = { false }
-                size = 'medium' />
         </div>
     );
 

react/features/settings/components/web/CalendarTab.tsx

@@ -1,4 +1,3 @@
-import Spinner from '@atlaskit/spinner';
 import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
@@ -9,6 +8,7 @@ import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
+import Spinner from '../../../base/ui/components/web/Spinner';
 import {
     CALENDAR_TYPE,
     MicrosoftSignInButton,
@@ -213,11 +213,7 @@ class CalendarTab extends Component<IProps, IState> {
      */
     _renderLoadingState() {
         return (
-            <Spinner
+            <Spinner />
-
-                // @ts-ignore
-                isCompleting = { false }
-                size = 'medium' />
         );
     }
 

react/features/virtual-background/components/VirtualBackgroundPreview.tsx

@@ -1,4 +1,3 @@
-import Spinner from '@atlaskit/spinner';
 import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React, { PureComponent } from 'react';
@@ -12,6 +11,7 @@ import Video from '../../base/media/components/Video';
 import { equals } from '../../base/redux/functions';
 import { getCurrentCameraDeviceId } from '../../base/settings/functions.web';
 import { createLocalTracksF } from '../../base/tracks/functions';
+import Spinner from '../../base/ui/components/web/Spinner';
 import { showWarningNotification } from '../../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 import { toggleBackgroundEffect } from '../actions';
@@ -207,12 +207,7 @@ class VirtualBackgroundPreview extends PureComponent<IProps, IState> {
     _loadVideoPreview() {
         return (
             <div className = 'video-preview-loader'>
-                <Spinner
+                <Spinner size = 'large' />
-
-                    // @ts-ignore
-                    invertColor = { true }
-                    isCompleting = { false }
-                    size = { 'large' } />
             </div>
         );
     }

react/features/virtual-background/components/VirtualBackgrounds.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import Spinner from '@atlaskit/spinner';
 // @ts-ignore
 import Bourne from '@hapi/bourne';
 // @ts-ignore
@@ -17,6 +16,7 @@ import { IconCloseLarge } from '../../base/icons/svg';
 import { withPixelLineHeight } from '../../base/styles/functions.web';
 // @ts-ignore
 import { Tooltip } from '../../base/tooltip';
+import Spinner from '../../base/ui/components/web/Spinner';
 import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
 import { toDataURL } from '../functions';
 import logger from '../logger';
@@ -368,11 +368,7 @@ function VirtualBackgrounds({
                 options = { options } />
             {loading ? (
                 <div className = { classes.virtualBackgroundLoading }>
-                    <Spinner
+                    <Spinner />
-
-                        // @ts-ignore
-                        isCompleting = { false }
-                        size = 'medium' />
                 </div>
             ) : (
                 <div className = { classes.container }>