From 78cb67c641e5723af59e0cf8a172a443aafa6f33 Mon Sep 17 00:00:00 2001 From: Pawel Kowalski <25907418+MentorPK@users.noreply.github.com> Date: Fri, 27 Oct 2023 02:19:31 +0200 Subject: feat: change loader component (#1410) * CHANGED react-loater to react-loader-spinner * CHANGED brandColor to primary * feat: change loader component - remove redundant /index path from Loader imports in multiple files - remove commented out braces in RecipesDashboard - remove redundant color which is default from Loader in InfoBar - update size of Loader in InfoBar to be the same as InfoBox - change passed size prop from string to number in Button component - add slight gap for FullscreenLoader to styles.ts - fix Loader to check for color primary which is passed rather than brandColor - remove hardcoded width and height from WorkspaceSwitchingIndicator which lead to elements not being vertically centered - remove color prop from Loader in WorkspaceSwitchingIndicator since white is already the default - remove switchingIndicator.spinnerColor from default theme since white is already the default * implement PR feedback * re-add color to WorkspaceSwitchingIndicator --------- Co-authored-by: MCMXC <16797721+mcmxcdev@users.noreply.github.com> --- .../settings/account/AccountDashboard.tsx | 4 +- .../settings/recipes/RecipesDashboard.tsx | 4 +- .../settings/services/ServicesDashboard.tsx | 2 +- src/components/settings/team/TeamDashboard.tsx | 4 +- src/components/ui/FullscreenLoader/index.tsx | 8 ++-- src/components/ui/FullscreenLoader/styles.ts | 1 + src/components/ui/InfoBar.tsx | 18 ++++----- src/components/ui/Infobox.tsx | 18 ++++----- src/components/ui/Loader.tsx | 46 ---------------------- src/components/ui/button/index.tsx | 27 +++---------- src/components/ui/loader/index.tsx | 41 ++++++++++++------- .../components/WorkspaceSwitchingIndicator.tsx | 18 +++------ .../workspaces/components/WorkspacesDashboard.tsx | 2 +- src/themes/default/index.ts | 3 -- 14 files changed, 67 insertions(+), 129 deletions(-) delete mode 100644 src/components/ui/Loader.tsx (limited to 'src') diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx index de323c06e..ffa684458 100644 --- a/src/components/settings/account/AccountDashboard.tsx +++ b/src/components/settings/account/AccountDashboard.tsx @@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { Tooltip as ReactTooltip } from 'react-tooltip'; import { H1, H2 } from '../../ui/headline'; -import Loader from '../../ui/Loader'; +import Loader from '../../ui/loader'; import Button from '../../ui/button'; import Infobox from '../../ui/infobox/index'; import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; @@ -123,7 +123,7 @@ class AccountDashboard extends Component { )} {!isUsingWithoutAccount && ( <> - {isLoading && } + {isLoading && } {!isLoading && userInfoRequestFailed && ( { - {/* )} */} + {isLoading ? ( ) : ( diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx index d64779a36..b8c3ce3f0 100644 --- a/src/components/settings/services/ServicesDashboard.tsx +++ b/src/components/settings/services/ServicesDashboard.tsx @@ -5,7 +5,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { To } from 'history'; import SearchInput from '../../ui/SearchInput'; import Infobox from '../../ui/Infobox'; -import Loader from '../../ui/Loader'; +import Loader from '../../ui/loader'; import FAB from '../../ui/FAB'; import ServiceItem from './ServiceItem'; import Appear from '../../ui/effects/Appear'; diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx index 77bccb8c3..406656160 100644 --- a/src/components/settings/team/TeamDashboard.tsx +++ b/src/components/settings/team/TeamDashboard.tsx @@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { Tooltip as ReactTooltip } from 'react-tooltip'; import withStyles, { WithStylesProps } from 'react-jss'; import classnames from 'classnames'; -import Loader from '../../ui/Loader'; +import Loader from '../../ui/loader'; import Button from '../../ui/button'; import Infobox from '../../ui/Infobox'; import { H1 } from '../../ui/headline'; @@ -128,7 +128,7 @@ class TeamDashboard extends Component {
- {isLoading && } + {isLoading && } {!isLoading && userInfoRequestFailed && ( { render(): ReactElement { const { classes, - theme = '', + theme, className = '', spinnerColor = '', children = null, @@ -39,9 +39,7 @@ class FullscreenLoader extends Component { >

{title}

{children &&
{children}
} diff --git a/src/components/ui/FullscreenLoader/styles.ts b/src/components/ui/FullscreenLoader/styles.ts index 64d24e4ce..9a1b24400 100644 --- a/src/components/ui/FullscreenLoader/styles.ts +++ b/src/components/ui/FullscreenLoader/styles.ts @@ -12,6 +12,7 @@ export default { alignItems: 'center', textAlign: 'center', height: 'auto', + gap: 8, }, title: { fontSize: 35, diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx index b7bfe0fa6..ae37546df 100644 --- a/src/components/ui/InfoBar.tsx +++ b/src/components/ui/InfoBar.tsx @@ -1,11 +1,11 @@ import { Component, MouseEventHandler, ReactNode } from 'react'; import { observer } from 'mobx-react'; import classnames from 'classnames'; -import Loader from 'react-loader'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { mdiClose } from '@mdi/js'; import { noop } from 'lodash'; +import Loader from './loader/index'; import Appear from './effects/Appear'; import Icon from './icon'; @@ -67,15 +67,13 @@ class InfoBar extends Component { {children} {ctaLabel && ( )} {!sticky && ( diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx index a794a5e9b..742717ed7 100644 --- a/src/components/ui/Infobox.tsx +++ b/src/components/ui/Infobox.tsx @@ -1,10 +1,10 @@ import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react'; import classnames from 'classnames'; -import Loader from 'react-loader'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; import { noop } from 'lodash'; import { observer } from 'mobx-react'; +import Loader from './loader/index'; import Icon from './icon'; const icons = { @@ -80,15 +80,13 @@ class Infobox extends Component {
{children}
{ctaLabel && ( )} {dismissible && ( diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx deleted file mode 100644 index d4457ae5f..000000000 --- a/src/components/ui/Loader.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, ReactElement, ReactNode } from 'react'; -import { observer, inject } from 'mobx-react'; -import Loader from 'react-loader'; - -import { FerdiumStores } from '../../@types/stores.types'; - -interface IProps { - className?: string; - color?: string; - loaded?: boolean; - stores?: FerdiumStores; - children?: ReactNode; -} - -// TODO: Can this file be merged into the './loader/index.tsx' file? -@inject('stores') -@observer -class LoaderComponent extends Component { - render(): ReactElement { - const { - loaded = false, - color = 'ACCENT', - className, - children, - } = this.props; - - const loaderColor = - color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color; - - return ( - // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' - - {children} - - ); - } -} - -export default LoaderComponent; diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index c37a88afa..f8bcf76b2 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -5,7 +5,7 @@ import { Property } from 'csstype'; import { noop } from 'lodash'; import { Component, MouseEventHandler } from 'react'; import withStyles, { WithStylesProps } from 'react-jss'; -import Loader from 'react-loader'; +import Loader from '../loader/index'; import { Theme } from '../../../themes'; import { IFormField } from '../typings/generic'; @@ -111,16 +111,8 @@ const styles = (theme: Theme) => ({ disabled: { opacity: theme.inputDisabledOpacity, }, - loader: { - position: 'relative' as Property.Position, - width: 20, - height: 18, - zIndex: 9999, - }, loaderContainer: { - width: (props: IProps): string => (props.busy ? '40px' : '0'), height: 20, - overflow: 'hidden', transition: loaderContainerTransition, marginLeft: (props: IProps): number => (props.busy ? 20 : 10), marginRight: (props: IProps): number => (props.busy ? -20 : -10), @@ -200,18 +192,11 @@ class ButtonComponent extends Component { const content = ( <> -
- {showLoader && ( - & Readonly - parentClassName={classes.loader} - /> - )} -
+ {showLoader && ( +
+ +
+ )}
{icon && } {label} diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 957899bdc..2cee00d96 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx @@ -1,26 +1,39 @@ import classnames from 'classnames'; import { Component } from 'react'; import injectStyle, { WithStylesProps } from 'react-jss'; -import ReactLoader from 'react-loader'; -import { Theme } from '../../../themes'; +import { Oval } from 'react-loader-spinner'; +import { inject } from 'mobx-react'; +import { FerdiumStores } from '../../../@types/stores.types'; -const styles = (theme: Theme) => ({ +const styles = () => ({ container: { position: 'relative', - height: 60, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: 'inherit', }, - loader: {}, - color: theme.colorText, }); interface IProps extends WithStylesProps { className?: string; color?: string; + size?: number; + loaded?: boolean; + stores?: FerdiumStores; } +@inject('stores') class LoaderComponent extends Component { render() { - const { classes, className, color } = this.props; + const { + classes, + className, + size = 36, + color = this.props.stores?.settings.app.accentColor, + loaded = false, + } = this.props; + const loaderColor = color || '#FFFFFF'; return (
{ })} data-type="franz-loader" > - & Readonly - parentClassName={classes.loader} +
); diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx index e1cc0f785..0fce811e5 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx @@ -3,9 +3,8 @@ import { observer } from 'mobx-react'; import withStyles, { WithStylesProps } from 'react-jss'; import classnames from 'classnames'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; -import Loader from '../../../components/ui/loader/index'; +import Loader from '../../../components/ui/loader'; import { workspaceStore } from '../index'; -import { Theme } from '../../../themes'; const messages = defineMessages({ switchingTo: { @@ -41,8 +40,6 @@ const styles = theme => ({ zIndex: 200, }, spinner: { - width: 40, - height: 40, marginRight: 10, }, message: { @@ -52,14 +49,14 @@ const styles = theme => ({ }, }); -interface IProps extends WithStylesProps, WrappedComponentProps { - theme?: Theme; -} +interface IProps + extends WithStylesProps, + WrappedComponentProps {} @observer class WorkspaceSwitchingIndicator extends Component { render(): ReactElement | null { - const { classes, intl, theme } = this.props; + const { classes, intl } = this.props; const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; if (!isSwitchingWorkspace) { @@ -73,10 +70,7 @@ class WorkspaceSwitchingIndicator extends Component { return (
- +

{`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}

diff --git a/src/features/workspaces/components/WorkspacesDashboard.tsx b/src/features/workspaces/components/WorkspacesDashboard.tsx index ba06730a0..0a417bffd 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.tsx +++ b/src/features/workspaces/components/WorkspacesDashboard.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import withStyles, { WithStylesProps } from 'react-jss'; import Infobox from '../../../components/ui/infobox/index'; -import Loader from '../../../components/ui/Loader'; +import Loader from '../../../components/ui/loader'; import WorkspaceItem from './WorkspaceItem'; import CreateWorkspaceForm from './CreateWorkspaceForm'; import Request from '../../../stores/lib/Request'; diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts index 31c6cbd63..cc886f299 100644 --- a/src/themes/default/index.ts +++ b/src/themes/default/index.ts @@ -226,9 +226,6 @@ export default (brandPrimary: string) => { }, }, }, - switchingIndicator: { - spinnerColor: 'white', - }, }, // Todos -- cgit v1.2.3-70-g09d2