m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert LoadingScreen into Functional Component and use React.memo (#17935)

Browse Source 
* LoadingScreen: transform into functional component

* LoadingScreen: remove unnecessary styles

* LoadingScreen: mv renderMessage
This commit is contained in:
Ariella Vu 2023-03-13 14:48:30 -07:00 committed by GitHub
parent 5b1b5dc03b
commit f499b56d16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/ui/loading-screen/index.scss
View File

@ -20,13 +20,10 @@
} }
&__container { &__container {
position: absolute;
top: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: translateY(-50%);
} }
&__error-screen { &__error-screen {

63
ui/components/ui/loading-screen/loading-screen.component.js
View File

@ -1,22 +1,13 @@
import React, { Component, isValidElement } from 'react'; import React, { isValidElement } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Spinner from '../spinner'; import Spinner from '../spinner';
class LoadingScreen extends Component { const LoadingScreen = ({
static defaultProps = { header,
loadingMessage: null, loadingMessage,
showLoadingSpinner: true, showLoadingSpinner = true,
}; }) => {
const renderMessage = () => {
static propTypes = {
loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
showLoadingSpinner: PropTypes.bool,
header: PropTypes.element,
};
renderMessage() {
const { loadingMessage } = this.props;
if (!loadingMessage) { if (!loadingMessage) {
return null; return null;
} }
@ -26,24 +17,28 @@ class LoadingScreen extends Component {
) : ( ) : (
<span>{loadingMessage}</span> <span>{loadingMessage}</span>
); );
} };
render() { return (
return ( <div className="loading-overlay">
<div className="loading-overlay"> {header}
{this.props.header} <div className="loading-overlay__container">
<div className="loading-overlay__container"> {showLoadingSpinner && (
{this.props.showLoadingSpinner && ( <Spinner
<Spinner color="var(--color-warning-default)"
color="var(--color-warning-default)" className="loading-overlay__spinner"
className="loading-overlay__spinner" />
/> )}
)} {renderMessage()}
{this.renderMessage()}
</div>
</div> </div>
); </div>
} );
} };
export default LoadingScreen; LoadingScreen.propTypes = {
header: PropTypes.element,
loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
showLoadingSpinner: PropTypes.bool,
};
export default React.memo(LoadingScreen);