Merge branch 'hotfix/v2.0.4' into feature/download-event

packages/client/src/routes/client.js

@@ -5,6 +5,7 @@ import loadable from "@loadable/component";
 import PrivateRoute from "@docspace/common/components/PrivateRoute";
 import PublicRoute from "@docspace/common/components/PublicRoute";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
+import componentLoader from "@docspace/components/utils/component-loader";
 
 import Error404 from "SRC_DIR/pages/Errors/404";
 import FilesView from "SRC_DIR/pages/Home/View/Files";
@@ -13,24 +14,36 @@ import SettingsView from "SRC_DIR/pages/Home/View/Settings";
 
 import { generalRoutes } from "./general";
 
-const Client = loadable(() => import("../Client"));
+const Client = loadable(() => componentLoader(() => import("../Client")));
 
-const Home = loadable(() => import("../pages/Home"));
+const Home = loadable(() => componentLoader(() => import("../pages/Home")));
 
-const Sdk = loadable(() => import("../pages/Sdk"));
+const Sdk = loadable(() => componentLoader(() => import("../pages/Sdk")));
 
-const FormGallery = loadable(() => import("../pages/FormGallery"));
-const PublicRoom = loadable(() => import("../pages/PublicRoom"));
-const About = loadable(() => import("../pages/About"));
-const Wizard = loadable(() => import("../pages/Wizard"));
-const PreparationPortal = loadable(() => import("../pages/PreparationPortal"));
-const PortalUnavailable = loadable(() => import("../pages/PortalUnavailable"));
-const ErrorUnavailable = loadable(() => import("../pages/Errors/Unavailable"));
+const FormGallery = loadable(() =>
+  componentLoader(() => import("../pages/FormGallery"))
+);
+const PublicRoom = loadable(() =>
+  componentLoader(() => import("../pages/PublicRoom"))
+);
+const About = loadable(() => componentLoader(() => import("../pages/About")));
+const Wizard = loadable(() => componentLoader(() => import("../pages/Wizard")));
+const PreparationPortal = loadable(() =>
+  componentLoader(() => import("../pages/PreparationPortal"))
+);
+const PortalUnavailable = loadable(() =>
+  componentLoader(() => import("../pages/PortalUnavailable"))
+);
+const ErrorUnavailable = loadable(() =>
+  componentLoader(() => import("../pages/Errors/Unavailable"))
+);
 const AccessRestricted = loadable(() =>
-  import("../pages/Errors/AccessRestricted")
+  componentLoader(() => import("../pages/Errors/AccessRestricted"))
 );
 
-const Error401 = loadable(() => import("client/Error401"));
+const Error401 = loadable(() =>
+  componentLoader(() => import("client/Error401"))
+);
 
 const ClientRoutes = [
   {

packages/client/src/routes/confirm.js

@@ -3,52 +3,63 @@ import loadable from "@loadable/component";
 
 import ConfirmRoute from "../helpers/confirmRoute";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
+import componentLoader from "@docspace/components/utils/component-loader";
 
 import Error404 from "SRC_DIR/pages/Errors/404";
 import { AuthenticatedAction } from "../helpers/constants";
 
-const Confirm = loadable(() => import("../pages/Confirm"));
+const Confirm = loadable(() =>
+  componentLoader(() => import("../pages/Confirm"))
+);
 
 const ActivateUserForm = loadable(() =>
-  import("../pages/Confirm/sub-components/activateUser")
+  componentLoader(() => import("../pages/Confirm/sub-components/activateUser"))
 );
 const CreateUserForm = loadable(() =>
-  import("../pages/Confirm/sub-components/createUser")
+  componentLoader(() => import("../pages/Confirm/sub-components/createUser"))
 );
 const ChangePasswordForm = loadable(() =>
+  componentLoader(() =>
     import("../pages/Confirm/sub-components/changePassword")
+  )
 );
 const ActivateEmailForm = loadable(() =>
-  import("../pages/Confirm/sub-components/activateEmail")
+  componentLoader(() => import("../pages/Confirm/sub-components/activateEmail"))
 );
 const ChangeEmailForm = loadable(() =>
-  import("../pages/Confirm/sub-components/changeEmail")
+  componentLoader(() => import("../pages/Confirm/sub-components/changeEmail"))
 );
 const ChangePhoneForm = loadable(() =>
-  import("../pages/Confirm/sub-components/changePhone")
+  componentLoader(() => import("../pages/Confirm/sub-components/changePhone"))
 );
 const ProfileRemoveForm = loadable(() =>
-  import("../pages/Confirm/sub-components/profileRemove")
+  componentLoader(() => import("../pages/Confirm/sub-components/profileRemove"))
 );
 const ChangeOwnerForm = loadable(() =>
-  import("../pages/Confirm/sub-components/changeOwner")
+  componentLoader(() => import("../pages/Confirm/sub-components/changeOwner"))
 );
 const TfaAuthForm = loadable(() =>
-  import("../pages/Confirm/sub-components/tfaAuth")
+  componentLoader(() => import("../pages/Confirm/sub-components/tfaAuth"))
 );
 const TfaActivationForm = loadable(() =>
-  import("../pages/Confirm/sub-components/tfaActivation")
+  componentLoader(() => import("../pages/Confirm/sub-components/tfaActivation"))
 );
 const RemovePortal = loadable(() =>
-  import("../pages/Confirm/sub-components/removePortal")
+  componentLoader(() => import("../pages/Confirm/sub-components/removePortal"))
 );
 const DeactivatePortal = loadable(() =>
+  componentLoader(() =>
     import("../pages/Confirm/sub-components/deactivatePortal")
+  )
 );
 const ContinuePortal = loadable(() =>
+  componentLoader(() =>
     import("../pages/Confirm/sub-components/continuePortal")
+  )
+);
+const Auth = loadable(() =>
+  componentLoader(() => import("../pages/Confirm/sub-components/auth"))
 );
-const Auth = loadable(() => import("../pages/Confirm/sub-components/auth"));
 
 const confirmRoutes = [
   {

packages/client/src/routes/general.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
-
 import loadable from "@loadable/component";
 
 import PrivateRoute from "@docspace/common/components/PrivateRoute";
+import componentLoader from "@docspace/components/utils/component-loader";
 
-const Profile = loadable(() => import("../pages/Profile"));
+const Profile = loadable(() =>
+  componentLoader(() => import("../pages/Profile"))
+);
 
 const generalRoutes = [
   {

packages/client/src/routes/portalSettings.js

@@ -4,136 +4,199 @@ import loadable from "@loadable/component";
 
 import PrivateRoute from "@docspace/common/components/PrivateRoute";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
+import componentLoader from "@docspace/components/utils/component-loader";
 
 import Error404 from "SRC_DIR/pages/Errors/404";
 
 import { generalRoutes } from "./general";
 
-const PortalSettings = loadable(() => import("../pages/PortalSettings"));
+const PortalSettings = loadable(() =>
+  componentLoader(() => import("../pages/PortalSettings"))
+);
 
 const CustomizationSettings = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/common/index.js")
+  )
 );
 const LanguageAndTimeZoneSettings = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/common/Customization/language-and-time-zone"
     )
+  )
 );
 const WelcomePageSettings = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/common/Customization/welcome-page-settings"
     )
+  )
 );
 const DNSSettings = loadable(() =>
-  import("../pages/PortalSettings/categories/common/Customization/dns-settings")
+  componentLoader(() =>
+    import(
+      "../pages/PortalSettings/categories/common/Customization/dns-settings"
+    )
+  )
 );
 const PortalRenaming = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/common/Customization/portal-renaming"
     )
+  )
 );
 const WhiteLabel = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/common/Branding/whitelabel")
+  )
 );
 const CompanyInfoSettings = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/common/Branding/companyInfoSettings"
     )
+  )
 );
 const AdditionalResources = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/common/Branding/additionalResources"
     )
+  )
 );
 const SecuritySettings = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/security/index.js")
+  )
 );
 const TfaPage = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/security/access-portal/tfa")
+  )
 );
 const PasswordStrengthPage = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/security/access-portal/passwordStrength"
     )
+  )
 );
 const TrustedMailPage = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/security/access-portal/trustedMail"
     )
+  )
 );
 const IpSecurityPage = loadable(() =>
-  import("../pages/PortalSettings/categories/security/access-portal/ipSecurity")
+  componentLoader(() =>
+    import(
+      "../pages/PortalSettings/categories/security/access-portal/ipSecurity"
+    )
+  )
 );
 const BruteForceProtectionPage = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/security/access-portal/bruteForceProtection"
     )
+  )
 );
 const AdminMessagePage = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/security/access-portal/adminMessage"
     )
+  )
 );
 const SessionLifetimePage = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/security/access-portal/sessionLifetime"
     )
+  )
 );
 const Integration = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/integration")
+  )
 );
 const Payments = loadable(() =>
-  import("../pages/PortalSettings/categories/payments")
+  componentLoader(() => import("../pages/PortalSettings/categories/payments"))
 );
 const ThirdParty = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"
     )
+  )
 );
 
 const DocumentService = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/integration/DocumentService")
+  )
 );
 
 const SingleSignOn = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/integration/SingleSignOn")
+  )
 );
 const SPSettings = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/integration/SingleSignOn/SPSettings"
     )
+  )
 );
 const SPMetadata = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata"
     )
+  )
 );
 
 const DeveloperTools = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/developer-tools/index.js")
+  )
 );
 const WebhookHistory = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"
     )
+  )
 );
 const WebhookDetails = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"
     )
+  )
 );
 const Backup = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/data-management/index")
+  )
 );
 const DeleteDataPage = loadable(() =>
+  componentLoader(() =>
     import("../pages/PortalSettings/categories/delete-data")
+  )
 );
 const RestoreBackup = loadable(() =>
+  componentLoader(() =>
     import(
       "../pages/PortalSettings/categories/data-management/backup/restore-backup/index"
     )
+  )
 );
-const Bonus = loadable(() => import("../pages/Bonus"));
+const Bonus = loadable(() => componentLoader(() => import("../pages/Bonus")));
 
 const PortalSettingsRoutes = {
   path: "portal-settings/",

packages/components/utils/component-loader.ts

@@ -0,0 +1,22 @@
+export default function componentLoader(
+  lazyComponent: Function,
+  attemptsLeft: number = 3
+) {
+  return new Promise((resolve, reject) => {
+    lazyComponent()
+      .then(resolve)
+      .catch((error: unknown) => {
+        // let us retry after 1500 ms
+        setTimeout(() => {
+          if (attemptsLeft === 1) {
+            reject(error);
+            return;
+          }
+          componentLoader(lazyComponent, attemptsLeft - 1).then(
+            resolve,
+            reject
+          );
+        }, 1500);
+      });
+  });
+}