From 23cfcacd091416455a02676e901d8e5990bd8c46 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Sun, 24 May 2020 23:58:28 +0200
Subject: [PATCH] Extract loading screen compontent #69

---
 .../application-loader/application-loader.tsx | 23 ++++++-------------
 .../application-loader/loading-screen.tsx     | 21 +++++++++++++++++
 2 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 src/components/application-loader/loading-screen.tsx

diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx
index 184d1bc8e..36eec0913 100644
--- a/src/components/application-loader/application-loader.tsx
+++ b/src/components/application-loader/application-loader.tsx
@@ -1,7 +1,6 @@
 import React, {Fragment, useEffect, useState} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import "./application-loader.scss";
-import {Alert} from "react-bootstrap";
+import {LoadingScreen} from "./loading-screen";
 
 interface ApplicationLoaderProps {
     initTasks: Promise<any>[]
@@ -28,17 +27,9 @@ export const ApplicationLoader: React.FC<ApplicationLoaderProps> = ({children, i
         })
     }, [initTasks]);
 
-    return (<Fragment>{
-        doneTasks < initTasks.length || initTasks.length === 0 ? (
-            <div className="loader middle">
-                <div className="icon">
-                    <FontAwesomeIcon icon="file-alt" size="6x"
-                                     className={failed ? "animation-shake" : "animation-pulse"}/>
-                </div>
-                {
-                    failed ? <Alert variant={"danger"}>An error occured while loading the application!</Alert> : null
-                }
-            </div>
-        ) : children
-    }</Fragment>);
-}
+    return (
+        doneTasks < initTasks.length || initTasks.length === 0 ?
+            <LoadingScreen failed={failed}/> :
+            <Fragment>{children}</Fragment>
+    );
+}
\ No newline at end of file
diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx
new file mode 100644
index 000000000..57d06f8b3
--- /dev/null
+++ b/src/components/application-loader/loading-screen.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {Alert} from "react-bootstrap";
+
+export interface LoadingScreenProps {
+    failed: boolean
+}
+
+export const LoadingScreen: React.FC<LoadingScreenProps> = ({failed}) => {
+    return (
+        <div className="loader middle">
+            <div className="icon">
+                <FontAwesomeIcon icon="file-alt" size="6x"
+                                 className={failed ? "animation-shake" : "animation-pulse"}/>
+            </div>
+            {
+                failed ? <Alert variant={"danger"}>An error occured while loading the application!</Alert> : null
+            }
+        </div>
+    )
+}
\ No newline at end of file