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 {
position: absolute;
top: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-50%);
}
&__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 Spinner from '../spinner';
class LoadingScreen extends Component {
static defaultProps = {
loadingMessage: null,
showLoadingSpinner: true,
};
static propTypes = {
loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
showLoadingSpinner: PropTypes.bool,
header: PropTypes.element,
};
renderMessage() {
const { loadingMessage } = this.props;
const LoadingScreen = ({
header,
loadingMessage,
showLoadingSpinner = true,
}) => {
const renderMessage = () => {
if (!loadingMessage) {
return null;
}
@ -26,24 +17,28 @@ class LoadingScreen extends Component {
) : (
<span>{loadingMessage}</span>
);
}
};
render() {
return (
<div className="loading-overlay">
{this.props.header}
<div className="loading-overlay__container">
{this.props.showLoadingSpinner && (
<Spinner
color="var(--color-warning-default)"
className="loading-overlay__spinner"
/>
)}
{this.renderMessage()}
</div>
return (
<div className="loading-overlay">
{header}
<div className="loading-overlay__container">
{showLoadingSpinner && (
<Spinner
color="var(--color-warning-default)"
className="loading-overlay__spinner"
/>
)}
{renderMessage()}
</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);