tooling: replace react-loadable with react lazy

package.json

@@ -8,7 +8,6 @@
     "react": "16.6.3",
     "react-dom": "16.6.3",
     "react-icons": "3.2.2",
-    "react-loadable": "5.5.0",
     "react-textarea-autosize": "7.0.4",
     "react-toastify": "4.4.3",
     "tslib": "1.9.3"
@@ -23,7 +22,6 @@
     "@types/puppeteer": "1.10.0",
     "@types/react": "16.7.4",
     "@types/react-dom": "16.0.9",
-    "@types/react-loadable": "5.4.1",
     "@types/react-textarea-autosize": "4.3.3",
     "css-loader": "1.0.1",
     "dotenv": "6.1.0",

public/AsyncPages.tsx

@@ -1,146 +1,39 @@
-import React from "react";
-import Loadable from "react-loadable";
+import { lazy } from "react";
 
-import { Loader } from "@fider/components/common/Loader";
+export const AsyncHomePage = lazy(() => import("@fider/pages/Home/Home.page"));
 
-const Loading = () => (
-  <div className="page">
-    <Loader />
-  </div>
+export const AsyncShowPostPage = lazy(() => import("@fider/pages/ShowPost/ShowPost.page"));
+
+export const AsyncManageMembersPage = lazy(() => import("@fider/pages/Administration/pages/ManageMembers.page"));
+
+export const AsyncManageTagsPage = lazy(() => import("@fider/pages/Administration/pages/ManageTags.page"));
+
+export const AsyncPrivacySettingsPage = lazy(() => import("@fider/pages/Administration/pages/PrivacySettings.page"));
+
+export const AsyncExportPage = lazy(() => import("@fider/pages/Administration/pages/Export.page"));
+
+export const AsyncInvitationsPage = lazy(() => import("@fider/pages/Administration/pages/Invitations.page"));
+
+export const AsyncManageAuthenticationPage = lazy(() =>
+  import("@fider/pages/Administration/pages/ManageAuthentication.page")
 );
 
-export const AsyncHomePage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Home/Home.page");
-    return module.HomePage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncShowPostPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/ShowPost/ShowPost.page");
-    return module.ShowPostPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncManageMembersPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/ManageMembers.page");
-    return module.ManageMembersPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncManageTagsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/ManageTags.page");
-    return module.ManageTagsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncPrivacySettingsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/PrivacySettings.page");
-    return module.PrivacySettingsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncExportPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/Export.page");
-    return module.ExportPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncInvitationsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/Invitations.page");
-    return module.InvitationsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncManageAuthenticationPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/ManageAuthentication.page");
-    return module.ManageAuthenticationPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncAdvancedSettingsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/AdvancedSettings.page");
-    return module.AdvancedSettingsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncGeneralSettingsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/Administration/pages/GeneralSettings.page");
-    return module.GeneralSettingsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncSignInPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/SignIn/SignIn.page");
-    return module.SignInPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncSignUpPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/SignUp/SignUp.page");
-    return module.SignUpPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncCompleteSignInProfilePage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/CompleteSignInProfile/CompleteSignInProfile.page");
-    return module.CompleteSignInProfilePage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncMyNotificationsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/MyNotifications/MyNotifications.page");
-    return module.MyNotificationsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncMySettingsPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/MySettings/MySettings.page");
-    return module.MySettingsPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncOAuthEchoPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/OAuthEcho/OAuthEcho.page");
-    return module.OAuthEchoPage;
-  },
-  loading: () => <Loading />
-});
-
-export const AsyncUIToolkitPage = Loadable({
-  loader: async () => {
-    const module = await import("@fider/pages/UI/UIToolkit.page");
-    return module.UIToolkitPage;
-  },
-  loading: () => <Loading />
-});
+export const AsyncAdvancedSettingsPage = lazy(() => import("@fider/pages/Administration/pages/AdvancedSettings.page"));
+
+export const AsyncGeneralSettingsPage = lazy(() => import("@fider/pages/Administration/pages/GeneralSettings.page"));
+
+export const AsyncSignInPage = lazy(() => import("@fider/pages/SignIn/SignIn.page"));
+
+export const AsyncSignUpPage = lazy(() => import("@fider/pages/SignUp/SignUp.page"));
+
+export const AsyncCompleteSignInProfilePage = lazy(() =>
+  import("@fider/pages/CompleteSignInProfile/CompleteSignInProfile.page")
+);
+
+export const AsyncMyNotificationsPage = lazy(() => import("@fider/pages/MyNotifications/MyNotifications.page"));
+
+export const AsyncMySettingsPage = lazy(() => import("@fider/pages/MySettings/MySettings.page"));
+
+export const AsyncOAuthEchoPage = lazy(() => import("@fider/pages/OAuthEcho/OAuthEcho.page"));
+
+export const AsyncUIToolkitPage = lazy(() => import("@fider/pages/UI/UIToolkit.page"));

public/index.tsx

@@ -1,11 +1,17 @@
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import { resolveRootComponent } from "@fider/router";
-import { Header, Footer } from "@fider/components/common";
+import { Header, Footer, Loader } from "@fider/components/common";
 import { ErrorBoundary } from "@fider/components";
 import { classSet, Fider, actions, navigator } from "@fider/services";
 import { IconContext } from "react-icons";
 
+const Loading = () => (
+  <div className="page">
+    <Loader />
+  </div>
+);
+
 import "@fider/assets/styles/main.scss";
 
 const logProductionError = (err: Error) => {
@@ -51,7 +57,7 @@ window.addEventListener("error", (evt: ErrorEvent) => {
     <ErrorBoundary onError={logProductionError}>
       <IconContext.Provider value={{ className: "icon" }}>
         {config.showHeader && <Header />}
-        {React.createElement(config.component, fider.session.props)}
+        <Suspense fallback={<Loading />}>{React.createElement(config.component, fider.session.props)}</Suspense>
         {config.showHeader && <Footer />}
       </IconContext.Provider>
     </ErrorBoundary>,

public/pages/Administration/pages/AdvancedSettings.page.tsx

@@ -16,7 +16,7 @@ interface AdvancedSettingsPageState {
   error?: Failure;
 }
 
-export class AdvancedSettingsPage extends AdminBasePage<AdvancedSettingsPageProps, AdvancedSettingsPageState> {
+export default class AdvancedSettingsPage extends AdminBasePage<AdvancedSettingsPageProps, AdvancedSettingsPageState> {
   public id = "p-admin-advanced";
   public name = "advanced";
   public icon = FaStar;

public/pages/Administration/pages/Export.page.tsx

@@ -4,7 +4,7 @@ import { Button, Form, Field } from "@fider/components";
 import { FaRegFileExcel } from "react-icons/fa";
 import { AdminBasePage } from "../components/AdminBasePage";
 
-export class ExportPage extends AdminBasePage<{}, {}> {
+export default class ExportPage extends AdminBasePage<{}, {}> {
   public id = "p-admin-export";
   public name = "export";
   public icon = FaRegFileExcel;

public/pages/Administration/pages/GeneralSettings.page.tsx

@@ -29,7 +29,7 @@ interface GeneralSettingsPageState {
   error?: Failure;
 }
 
-export class GeneralSettingsPage extends AdminBasePage<GeneralSettingsPageProps, GeneralSettingsPageState> {
+export default class GeneralSettingsPage extends AdminBasePage<GeneralSettingsPageProps, GeneralSettingsPageState> {
   private fileSelector?: HTMLInputElement | null;
 
   public id = "p-admin-general";

public/pages/Administration/pages/Invitations.page.tsx

@@ -14,7 +14,7 @@ interface InvitationsPageState {
   error?: Failure;
 }
 
-export class InvitationsPage extends AdminBasePage<{}, InvitationsPageState> {
+export default class InvitationsPage extends AdminBasePage<{}, InvitationsPageState> {
   public id = "p-admin-invitations";
   public name = "invitations";
   public icon = FaEnvelope;

public/pages/Administration/pages/ManageAuthentication.page.tsx

@@ -18,7 +18,7 @@ interface ManageAuthenticationPageState {
   editing?: OAuthConfig;
 }
 
-export class ManageAuthenticationPage extends AdminBasePage<
+export default class ManageAuthenticationPage extends AdminBasePage<
   ManageAuthenticationPageProps,
   ManageAuthenticationPageState
 > {

public/pages/Administration/pages/ManageMembers.page.tsx

@@ -66,7 +66,7 @@ const UserListItem = (props: UserListItemProps) => {
   );
 };
 
-export class ManageMembersPage extends AdminBasePage<ManageMembersPageProps, ManageMembersPageState> {
+export default class ManageMembersPage extends AdminBasePage<ManageMembersPageProps, ManageMembersPageState> {
   public id = "p-admin-members";
   public name = "members";
   public icon = FaUsers;

public/pages/Administration/pages/ManageTags.page.tsx

@@ -30,7 +30,7 @@ const tagSorter = (t1: Tag, t2: Tag) => {
   return 0;
 };
 
-export class ManageTagsPage extends AdminBasePage<ManageTagsPageProps, ManageTagsPageState> {
+export default class ManageTagsPage extends AdminBasePage<ManageTagsPageProps, ManageTagsPageState> {
   public id = "p-admin-tags";
   public name = "tags";
   public icon = FaTags;

public/pages/Administration/pages/PrivacySettings.page.tsx

@@ -10,7 +10,7 @@ interface PrivacySettingsPageState {
   isPrivate: boolean;
 }
 
-export class PrivacySettingsPage extends AdminBasePage<{}, PrivacySettingsPageState> {
+export default class PrivacySettingsPage extends AdminBasePage<{}, PrivacySettingsPageState> {
   public id = "p-admin-privacy";
   public name = "privacy";
   public icon = FaKey;

public/pages/CompleteSignInProfile/CompleteSignInProfile.page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { HomePage, HomePageProps } from "../Home";
-import { SignInPage } from "../SignIn";
+import HomePage, { HomePageProps } from "../Home/Home.page";
+import SignInPage from "../SignIn/SignIn.page";
 import { Modal, Button, Form, Input, LegalFooter } from "@fider/components";
 import { actions, Failure, querystring, Fider } from "@fider/services";
 
@@ -10,7 +10,7 @@ interface CompleteSignInProfilePageState {
   error?: Failure;
 }
 
-export class CompleteSignInProfilePage extends React.Component<HomePageProps, CompleteSignInProfilePageState> {
+export default class CompleteSignInProfilePage extends React.Component<HomePageProps, CompleteSignInProfilePageState> {
   private key: string;
 
   constructor(props: HomePageProps) {

public/pages/Home/Home.page.tsx

@@ -34,7 +34,7 @@ const defaultWelcomeMessage = `We'd love to hear what you're thinking about.
 
 What can we do better? This is the place for you to vote, discuss and share ideas.`;
 
-export class HomePage extends React.Component<HomePageProps, HomePageState> {
+export default class HomePage extends React.Component<HomePageProps, HomePageState> {
   constructor(props: HomePageProps) {
     super(props);
     this.state = {