diff --git a/ui/components/ui/loading-screen/index.scss b/ui/components/ui/loading-screen/index.scss
index 753d8a06e..43e3c8231 100644
--- a/ui/components/ui/loading-screen/index.scss
+++ b/ui/components/ui/loading-screen/index.scss
@@ -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 {
diff --git a/ui/components/ui/loading-screen/loading-screen.component.js b/ui/components/ui/loading-screen/loading-screen.component.js
index 08869b9fa..2aba5453b 100644
--- a/ui/components/ui/loading-screen/loading-screen.component.js
+++ b/ui/components/ui/loading-screen/loading-screen.component.js
@@ -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);