make message part of spinner component

src/App.module.scss

@@ -25,7 +25,3 @@
         width: 100%;
     }
 }
-
-.loaderMessage {
-    color: $brand-grey-light;
-}

src/App.tsx

@@ -128,10 +128,7 @@ class App extends Component<{}, AppState> {
                             <main className={styles.main}>
                                 {this.state.isLoading ? (
                                     <div className={styles.loader}>
-                                        <Spinner />
-                                        <div className={styles.loaderMessage}>
-                                            Connecting to Ocean...
-                                        </div>
+                                        <Spinner message="Connecting to Ocean..." />
                                     </div>
                                 ) : (
                                     <Routes />

src/components/atoms/Spinner.module.scss

@@ -22,6 +22,11 @@
     }
 }
 
+.spinnerMessage {
+    color: $brand-grey-light;
+    margin-top: $spacer / 2;
+}
+
 @keyframes spinner {
     to {
         transform: rotate(360deg);

src/components/atoms/Spinner.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import styles from './Spinner.module.scss'
 
-const Spinner = () => <div className={styles.spinner} />
+const Spinner = ({ message }: { message?: string }) => (
+    <div className={styles.spinner}>
+        {message && <div className={styles.spinnerMessage}>{message}</div>}
+    </div>
+)
 
 export default Spinner