From 7fe6e954d611ad2a3a4ff2db612b59429d908029 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Sun, 7 Oct 2018 23:46:04 +0300
Subject: [PATCH] delay loading text

---
 client/src/components/App.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/components/App.js b/client/src/components/App.js
index 15d7feb..19f268f 100644
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -7,27 +7,37 @@ import Loadable from 'react-loadable';
 import './Container.css';
 import './App.css';
 
+function Loading(props) {
+  if (props.error) {
+    return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
+  } else if (props.pastDelay) {
+    return <div>Loading...</div>;
+  } else {
+    return null;
+  }
+}
+
 const LoadableTodosView = Loadable({
   loader: () => import('./todolist/TodosView'),
-  loading: () => <span>loading</span>,
+  loading: () => Loading,
   delay: 1000,
 });
 
 const LoadableLoginForm = Loadable({
   loader: () => import('./user/LoginForm'),
-  loading: () => <span>loading</span>,
+  loading: () => Loading,
   delay: 1000,
 });
 
 const LoadableSignupForm = Loadable({
   loader: () => import('./user/SignupForm'),
-  loading: () => <span>loading</span>,
+  loading: () => Loading,
   delay: 1000,
 });
 
 const LoadableEditView = Loadable({
   loader: () => import('./user/EditForm'),
-  loading: () => <span>loading</span>,
+  loading: () => Loading,
   delay: 1000,
 });