Changed the way that pages are imported in App.js to a more efficient, where...

Changed the way that pages are imported in App.js to a more efficient, where the content is loaded only when needed. Bugs are still present, like black background in some components. The next step is to change the way that images work.

src/App.js

@@ -16,8 +16,90 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
+// const = React.lazy(() => import());
+
 import React, { useContext, useEffect, useState } from "react";
 import { Store } from './Store'
+import LoadingSpinner from './Components/LoadingSpinner';
+import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import Header from "./Components/Header";
+import createBrowserHistory from 'history/createBrowserHistory'
+
+const Unauthorized = React.lazy(() => import('./Admin/Components/Components/Unauthorized'));
+const Home = React.lazy(() => import('./Pages/HomeFunction'));
+const Search = React.lazy(() => import("./Pages/Search"));
+const EcFooter = React.lazy(() => import("./Components/EcFooter"));
+const GNUAGPLfooter = React.lazy(() => import("./Components/AGPLFooter"));
+const UserPage = React.lazy(() => import("./Pages/UserPage"));
+const UserTerms = React.lazy(() => import("./Pages/UserTerms"));
+const Contact = React.lazy(() => import("./Pages/Contact"));
+const Teste = React.lazy(() => import("./Pages/Teste"));
+const AboutPage = React.lazy(() => import("./Pages/AboutPage"));
+const HelpCenter = React.lazy(() => import("./Pages/HelpCenter"));
+const TabResoursePub = React.lazy(() => import("./Pages/TabsHelp/TabResoursePub"));
+const TabResourseFind = React.lazy(() => import("./Pages/TabsHelp/TabResourseFind"));
+const TabNetPart = React.lazy(() => import("./Pages/TabsHelp/TabNetPart"));
+const TabManageAc = React.lazy(() => import("./Pages/TabsHelp/TabManageAc"));
+const PasswordRecoveryPage = React.lazy(() => import("./Pages/PasswordRecoveryPage.js"));
+const PageProfessor = React.lazy(() => import("./Pages/PageProfessor.js"));
+const ResourcePage = React.lazy(() => import("./Pages/ResourcePage"));
+const TermsPage = React.lazy(() => import("./Pages/TermsPage.js"));
+const PublicationPermissionsPage = React.lazy(() => import("./Pages/PublicationPermissionsPage.js"));
+const TabPlataformaMEC = React.lazy(() => import("./Pages/TabsHelp/TabPlataformaMEC"));
+const ItemStore = React.lazy(() => import("./Pages/ItemStore.js"));
+const EditProfilePage = React.lazy(() => import("./Pages/EditProfilePage.js"));
+const PublicUserPage = React.lazy(() => import("./Pages/PublicUserPage.js"));
+const UploadPage = React.lazy(() => import("./Pages/UploadPage.js"));
+const EditLearningObjectPage = React.lazy(() => import("./Pages/EditLearningObjectPage.js"));
+const SiteMap = React.lazy(() => import("./Pages/SiteMap"));
+const Accessibility = React.lazy(() => import("./Pages/Accessibility"));
+const CollectionPage = React.lazy(() => import("./Pages/CollectionPage.js"));
+const FormationMaterialPage = React.lazy(() => import("./Pages/FormationMaterialPage.js"));
+const FormationMaterialIframe = React.lazy(() => import("./Pages/FormationMaterialIframe.js"));
+const MaterialPage = React.lazy(() => import("./Pages/MaterialPage"));
+const PageNotFound = React.lazy(() => import("./Pages/PageNotFound.js"));
+const NoteVariables = React.lazy(() => import("./Admin/Pages/Pages/SubPages/NoteVariables"));
+const Institution = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Institutions"));
+const SendEmail = React.lazy(() => import("./Admin/Pages/Pages/SubPages/SendEmail"));
+const Inframe = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Inframe"));
+const Languages = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Languages"));
+const Activity = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Activity"));
+const InstitutionCard = React.lazy(() => import("./Admin/Components/Components/DataCards/InstitutionsCard"));
+const InstitutionsInput = React.lazy(() => import("./Admin/Components/Components/Inputs/IntitutionsInputs"));
+const CreateInstitution = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateInstitution"));
+const NoteVarCard = React.lazy(() => import("./Admin/Components/Components/DataCards/NoteVarCard"));
+const NoteVarInputs = React.lazy(() => import("./Admin/Components/Components/Inputs/NoteVarInputs"));
+const EditLanguage = React.lazy(() => import("./Admin/Components/Components/Inputs/EditLanguage"));
+const CreateLanguage = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateLanguage"));
+const ActivityCard = React.lazy(() => import("./Admin/Components/Components/DataCards/ActivityCard"));
+const CommunityQuestions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/CommunityQuestions"));
+const CommunityCard = React.lazy(() => import("./Admin/Components/Components/DataCards/CommunityQuestionCard"));
+const Collections = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Collections"));
+const CollectionCard = React.lazy(() => import("./Admin/Components/Components/DataCards/CollectionCard"));
+const EditCollection = React.lazy(() => import("./Admin/Components/Components/Inputs/EditCollection"));
+const Ratings = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Rating"));
+const RatingCard = React.lazy(() => import("./Admin/Components/Components/DataCards/RatingCard"));
+const EditRating = React.lazy(() => import("./Admin/Components/Components/Inputs/EditRating"));
+const CreateRating = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRating"));
+const Questions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Questions"));
+const CreateQuestions = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateQuestion"));
+const EducationalObject = React.lazy(() => import("./Admin/Pages/Pages/SubPages/EducationalObjects"));
+const EducationalObjectCard = React.lazy(() => import("./Admin/Components/Components/DataCards/EducationalObjectsCard"));
+const EducationalObjectEdit = React.lazy(() => import("./Admin/Components/Components/Inputs/EditEducationalObect"));
+const Complaints = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Complaints"));
+const ComplaintCard = React.lazy(() => import("./Admin/Components/Components/DataCards/ComplaintsCard"));
+const AproveTeacher = React.lazy(() => import("./Admin/Pages/Pages/SubPages/AproveTeacher"));
+const UserCard = React.lazy(() => import("./Admin/Components/Components/DataCards/UserCard"));
+const EditUser = React.lazy(() => import("./Admin/Components/Components/Inputs/EditUser"));
+const UserList = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Users"));
+const UserPermissions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Permissions"));
+const EditRole = React.lazy(() => import("./Admin/Components/Components/Inputs/EditRoles"));
+const CreateRole = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRole"));
+const BlockedUser = React.lazy(() => import("./Admin/Pages/Pages/SubPages/BlockedUsers"));
+const AppBarAdmin = React.lazy(() => import('./Admin/Components/Components/AppBar'));
+
+
+/*
 import Unauthorized from './Admin/Components/Components/Unauthorized'
 import Home from "./Pages/HomeFunction";
 import Search from "./Pages/Search";
@@ -94,6 +176,7 @@ import CreateRole from "./Admin/Components/Components/Inputs/CreateRole";
 import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers";
 import AppBarAdmin from './Admin/Components/Components/AppBar'
 import createBrowserHistory from 'history/createBrowserHistory'
+*/
 
 export default function App() {
     // eslint-disable-next-line
@@ -172,9 +255,21 @@ export default function App() {
         )
     }
 
+  const LoadingScreen = () => (
+    <div style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+    }}>
+        <LoadingSpinner/>
+    </div>
+  );
+
   return (
     // add piwik later
     // history={piwik.connectToHistory(customHistory)}
+    <React.Suspense fallback={<LoadingScreen/>}>
         <BrowserRouter>
             <Header />
             <div
@@ -453,7 +548,6 @@ export default function App() {
                     return <AdminTemplate inner={<SendEmail />}/>
                 }} 
                 />
-
                 <Route path='*' component={PageNotFound} />
             </Switch>
             {!hideFooter && (
@@ -463,5 +557,6 @@ export default function App() {
                 </div>
             )}
         </BrowserRouter>
+    </React.Suspense>
   );
 }
\ No newline at end of file