additional changes, setup localStorage

src/components/App.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { ElementType, useContext, useState } from 'react';
 import Topbar from './Topbar';
 import { Transfer } from './Transfer';
 import { Admin } from './Admin';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
 import styled from 'styled-components';
-
+import { coursesContext } from '../contexts/CoursesProvider';
+import LoadingOverlay from 'react-loading-overlay';
+import { SyncLoader } from 'react-spinners';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
@@ -16,21 +18,31 @@ const Wrapper = styled.div`
 `;
 
 export const App = () => {
+  const { isDataLoading } = useContext(coursesContext)!;
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
   const handleTransfer = () => {
     setOpenTransfer(!isOpenTransfer);
   };
 
+  const userPrivilige = localStorage.getItem('userPrivilige');
+
   return (
     <>
-      <Topbar handleTransfer={handleTransfer} />
-      <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
-      <Wrapper>
-        
-        {sessionStorage.getItem('userPrivilage')=== "STUDENT" ? <><Scheduler />
-        <Rightbar /></>: <Admin/>}
-      </Wrapper>
+      <LoadingOverlay active={isDataLoading} spinner={<SyncLoader />}>
+        <Topbar handleTransfer={handleTransfer} />
+        <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
+        <Wrapper>
+          {userPrivilige === 'STUDENT' ? (
+            <>
+              <Scheduler />
+              <Rightbar />
+            </>
+          ) : (
+            <Admin />
+          )}
+        </Wrapper>
+      </LoadingOverlay>
     </>
   );
 };