From 126b0d385f650f6d6ac8b6737b2cac5c451fcd37 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Fri, 10 Mar 2023 15:35:55 +0200 Subject: [PATCH] feat(ui-components) Create Spinner component (#13026) Replace atlaskit Spinner with the new component Remove @atlaskit/spinner --- package-lock.json | 1 - package.json | 1 - .../react/components/web/LoadingIndicator.js | 2 +- .../base/ui/components/web/Spinner.tsx | 76 +++++++++++++++++++ .../components/CalendarList.web.js | 7 +- .../components/DesktopPickerPane.js | 6 +- .../LiveStream/web/StartLiveStreamDialog.js | 18 ++--- .../web/StartRecordingDialogContent.tsx | 4 +- .../components/web/SalesforceLinkDialog.tsx | 8 +- .../settings/components/web/CalendarTab.tsx | 8 +- .../components/VirtualBackgroundPreview.tsx | 9 +-- .../components/VirtualBackgrounds.tsx | 8 +- 12 files changed, 97 insertions(+), 51 deletions(-) create mode 100644 react/features/base/ui/components/web/Spinner.tsx diff --git a/package-lock.json b/package-lock.json index 078a58ed17..9a0e308bb3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2d737b06e0..6795b0d9f1 100644 --- a/package.json +++ b/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", diff --git a/react/features/base/react/components/web/LoadingIndicator.js b/react/features/base/react/components/web/LoadingIndicator.js index 0ae9c2e3ae..7541a60961 100644 --- a/react/features/base/react/components/web/LoadingIndicator.js +++ b/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'; diff --git a/react/features/base/ui/components/web/Spinner.tsx b/react/features/base/ui/components/web/Spinner.tsx new file mode 100644 index 0000000000..52738203d0 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default Spinner; diff --git a/react/features/calendar-sync/components/CalendarList.web.js b/react/features/calendar-sync/components/CalendarList.web.js index 9a293c84dc..2cc784ea3b 100644 --- a/react/features/calendar-sync/components/CalendarList.web.js +++ b/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 { } else if (_hasIntegrationSelected && !_hasLoadedEvents) { return (
- +
); } diff --git a/react/features/desktop-picker/components/DesktopPickerPane.js b/react/features/desktop-picker/components/DesktopPickerPane.js index 0b5c14ee89..83e9e4c73c 100644 --- a/react/features/desktop-picker/components/DesktopPickerPane.js +++ b/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 { type = { type } />)) : (
- +
); diff --git a/react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js b/react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js index 1ebaa4aad5..fe4fb77b0a 100644 --- a/react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js +++ b/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 + = + ; } /** @@ -310,11 +308,9 @@ class StartLiveStreamDialog case GOOGLE_API_STATES.NEEDS_LOADING: default: - googleContent = ( - - ); + googleContent + = + ; break; } diff --git a/react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx b/react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx index 995571768b..9d095d19c8 100644 --- a/react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx +++ b/react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx @@ -184,9 +184,7 @@ class StartRecordingDialogContent extends AbstractStartRecordingDialogContent + ); } diff --git a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx index 0cb0497e6a..d748f12095 100644 --- a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx +++ b/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 = () => (
- +
); diff --git a/react/features/settings/components/web/CalendarTab.tsx b/react/features/settings/components/web/CalendarTab.tsx index 25694904b1..c96898d523 100644 --- a/react/features/settings/components/web/CalendarTab.tsx +++ b/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 { */ _renderLoadingState() { return ( - + ); } diff --git a/react/features/virtual-background/components/VirtualBackgroundPreview.tsx b/react/features/virtual-background/components/VirtualBackgroundPreview.tsx index deb77632d3..209b586445 100644 --- a/react/features/virtual-background/components/VirtualBackgroundPreview.tsx +++ b/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 { _loadVideoPreview() { return (
- +
); } diff --git a/react/features/virtual-background/components/VirtualBackgrounds.tsx b/react/features/virtual-background/components/VirtualBackgrounds.tsx index 1a98d0e2fd..72cbde9b77 100644 --- a/react/features/virtual-background/components/VirtualBackgrounds.tsx +++ b/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 ? (
- +
) : (