basic loading screen and bugfixes

client/src/components/helpers/ProtectedRoute.tsx

 import { Route, RouteProps, useHistory } from 'react-router-dom';
 import { isLoggedIn } from 'adapters/auth';
-import { useEffect } from 'react';
-import { getTeams } from 'adapters/team';
+import { useEffect, useState } from 'react';
+import { getTeams, Team } from 'adapters/team';
+import LoadingScreen from 'components/ui/LoadingScreen';
 
 export default function ProtectedRoute(props: RouteProps) {
     const history = useHistory();
+    const [team, setTeam] = useState<Team[]>();
 
-    useEffect(() => {
-        if (!isLoggedIn()) {
-            history.push('/login');
-        }
-    })
-    
+    if (!isLoggedIn()) {
+        history.push('/login');
+    }
     useEffect(() => {
         getTeams().then((teams) => {
-            if(teams.length <= 0) {
-                history.push('/introduction');
-            }
+            setTeam(teams);
         }).catch(() => {
-            history.push('/introduction');
+
         });
-    });
+    }, [])
 
+
+    if (team && isLoggedIn()) {
+        if (team.length === 0) {
+            history.push('/introduction');
+        } else {
+            return <Route {...props} />
+        }
+    }
     return (
-        <Route {...props} />
+        <LoadingScreen />
     );
 }
 

client/src/components/navigation/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import Navigation from 'components/navigation/Navigation';
 import Avatar from 'components/ui/Avatar';
 import LineGraph from 'components/graphs/LineGraph';
 import { NavLink, useHistory } from 'react-router-dom';
-import { clearToken } from 'adapters/auth';
+import { clearToken, isLoggedIn } from 'adapters/auth';
 import './sidebar.scss';
 import { useEffect, useState } from 'react';
 import { getCurrentUser, User } from 'adapters/user';
@@ -16,9 +16,11 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
     const [user, setUser] = useState<User>();
 
     useEffect(() => {
-        getCurrentUser().then((user) => {
-            setUser(user);
-        }).catch(() => { });
+        if (isLoggedIn()) {
+            getCurrentUser().then((user) => {
+                setUser(user);
+            }).catch(() => { });
+        }
     }, [])
 
     const history = useHistory();
@@ -32,7 +34,7 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
         <aside className={'site-aside' + (mobileShown ? ' shown' : '')}>
             <div className="top">
                 <div className="profile">
-                    <Avatar user={user}/>
+                    <Avatar user={user} />
                     <span className="name">{user?.realname ?? user?.username}</span>
                     {user?.realname && <span className="username">{user?.username}</span>}
                 </div>

client/src/components/ui/LoadingScreen/index.tsx

+import './loading-screen.scss';
+export default function LoadingScreen() {
+    return (
+        <div className="loading-screen">
+            <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                width="40px" height="40px" viewBox="0 0 40 40" enableBackground="new 0 0 40 40" xmlSpace="preserve">
+                <path opacity="0.2" fill="gray" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
+                <path fill="gray" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+    C22.32,8.481,24.301,9.057,26.013,10.047z">
+                    <animateTransform attributeType="xml"
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 20 20"
+                        to="360 20 20"
+                        dur="0.5s"
+                        repeatCount="indefinite" />
+                </path>
+            </svg>
+        </div>
+    )
+}
\ No newline at end of file

client/src/components/ui/LoadingScreen/loading-screen.scss

+.loading-screen {
+    width: 100%;
+    height: 100%;
+    min-height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file

client/src/pages/AppWrapper.tsx

@@ -4,6 +4,7 @@ import { Switch } from 'react-router-dom';
 
 import ProtectedRoute from 'components/helpers/ProtectedRoute';
 import Header from 'components/navigation/Header';
+import { isLoggedIn } from 'adapters/auth';
 
 const Tasks = lazy(() => import('pages/Tasks'));
 const TaskDetail = lazy(() => import('pages/Tasks/TaskDetail'));

client/src/pages/Introduction/index.tsx

@@ -34,7 +34,7 @@ export default function Introduction() {
 
                 <div className="content-container">
                     <h1 className="underlined">Welcome to ryoko</h1>
-                    {!showForm && (
+                    {!showForm ? (
                         <div className="introduction-container">
                             <div className="lead-text">
                                 You are one step away from getting started with ryoko.
@@ -49,15 +49,14 @@ export default function Introduction() {
                                     Create a new Team
                             </Button>
                             </div>
-                        </div>)
-                    }
-                    {
+                        </div>
+                    ) :
                         showForm &&
                         (<>
                             <p className="lead-text">
                                 Create a new team with just one click by giving it a name!
                             </p>
-                            <TeamForm onSubmit={handleCreateTeam} onBack={() => setShowForm(false)} />)
+                            <TeamForm onSubmit={handleCreateTeam} onBack={() => setShowForm(false)} />
                         </>)
                     }
                 </div>