Use custom lazy for loading components

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/package.json

@@ -11,7 +11,7 @@
     "typecheck": "npx tsc --noEmit"
   },
   "dependencies": {
-    "@probo/react-lazy": "^0.1.0",
+    "@probo/react-lazy": "1.0.0",
     "@probo/vendors": "^0.0.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-avatar": "^1.1.3",

apps/console2/package.json

@@ -16,6 +16,7 @@
     "@probo/helpers": "1.0.0",
     "@probo/hooks": "1.0.0",
     "@probo/i18n": "1.0.0",
+    "@probo/react-lazy": "1.0.0",
     "@probo/ui": "1.0.0",
     "@probo/vendors": "0.0.1",
     "@radix-ui/react-dialog": "^1.1.14",

apps/console2/src/routes.tsx

@@ -8,13 +8,7 @@ import {
 } from "react-router";
 import { MainLayout } from "./layouts/MainLayout";
 import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
-import {
+import { Fragment, Suspense, type FC, type LazyExoticComponent } from "react";
-  Fragment,
-  lazy,
-  Suspense,
-  type FC,
-  type LazyExoticComponent,
-} from "react";
 import {
   relayEnvironment,
   UnAuthenticatedError,
@@ -31,8 +25,9 @@ import { peopleRoutes } from "./routes/peopleRoutes.ts";
 import { frameworkRoutes } from "./routes/frameworkRoutes.ts";
 import { PageError } from "./components/PageError.tsx";
 import { taskRoutes } from "./routes/taskRoutes.ts";
+import { lazy } from "@probo/react-lazy";
 
-function ErrorBoundary(props) {
+function ErrorBoundary() {
   const error = useRouteError();
 
   if (error instanceof UnAuthenticatedError) {

apps/console2/src/routes/documentsRoutes.ts

@@ -1,4 +1,4 @@
-import { Fragment, lazy } from "react";
+import { Fragment } from "react";
 import { loadQuery } from "react-relay";
 import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
@@ -6,6 +6,7 @@ import { documentsQuery } from "/hooks/graph/DocumentGraph";
 import { documentNodeQuery } from "/hooks/graph/DocumentGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { redirect } from "react-router";
+import { lazy } from "@probo/react-lazy";
 
 export const documentsRoutes = [
   {

apps/console2/src/routes/frameworkRoutes.ts

@@ -6,7 +6,8 @@ import {
   frameworkNodeQuery,
 } from "/hooks/graph/FrameworkGraph";
 import type { AppRoute } from "/routes";
-import { Fragment, lazy } from "react";
+import { Fragment } from "react";
+import { lazy } from "@probo/react-lazy";
 
 export const frameworkRoutes = [
   {

apps/console2/src/routes/measureRoutes.ts

@@ -1,10 +1,11 @@
-import { Fragment, lazy } from "react";
+import { Fragment } from "react";
 import { loadQuery } from "react-relay";
 import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { measureNodeQuery, measuresQuery } from "/hooks/graph/MeasureGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { redirect } from "react-router";
+import { lazy } from "@probo/react-lazy";
 
 export const measureRoutes = [
   {

apps/console2/src/routes/peopleRoutes.ts

@@ -1,4 +1,4 @@
-import { lazy } from "react";
+import { lazy } from "@probo/react-lazy";
 import { loadQuery } from "react-relay";
 import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";

apps/console2/src/routes/riskRoutes.ts

@@ -1,11 +1,12 @@
-import { Fragment, lazy } from "react";
+import { Fragment } from "react";
 import { loadQuery } from "react-relay";
 import { RisksPageSkeleton } from "/components/skeletons/RisksPageSkeleton.tsx";
 import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { riskNodeQuery, risksQuery } from "/hooks/graph/RiskGraph";
-import { PageSkeleton } from "/components/skeletons/PageSkeleton.tsx";
+import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { redirect } from "react-router";
+import { lazy } from "@probo/react-lazy";
 
 export const riskRoutes = [
   {

apps/console2/src/routes/taskRoutes.ts

@@ -1,4 +1,4 @@
-import { lazy } from "react";
+import { lazy } from "@probo/react-lazy";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { loadQuery } from "react-relay";
 import { relayEnvironment } from "/providers/RelayProviders";

apps/console2/src/routes/vendorRoutes.ts

@@ -1,4 +1,4 @@
-import { lazy } from "react";
+import { lazy } from "@probo/react-lazy";
 import { loadQuery } from "react-relay";
 import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";

package-lock.json

@@ -21,7 +21,7 @@
       "name": "@probo/console",
       "version": "0.0.1",
       "dependencies": {
-        "@probo/react-lazy": "^0.1.0",
+        "@probo/react-lazy": "1.0.0",
         "@probo/vendors": "^0.0.1",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-avatar": "^1.1.3",
@@ -229,6 +229,7 @@
         "@probo/helpers": "1.0.0",
         "@probo/hooks": "1.0.0",
         "@probo/i18n": "1.0.0",
+        "@probo/react-lazy": "1.0.0",
         "@probo/ui": "1.0.0",
         "@probo/vendors": "0.0.1",
         "@radix-ui/react-dialog": "^1.1.14",
@@ -14693,10 +14694,9 @@
     },
     "packages/react-lazy": {
       "name": "@probo/react-lazy",
-      "version": "0.1.0",
+      "version": "1.0.0",
-      "license": "MIT",
       "peerDependencies": {
-        "react": ">=16.8.0"
+        "react": ">18.0.0"
       }
     },
     "packages/tsconfig": {

packages/react-lazy/package.json

@@ -1,14 +1,18 @@
 {
-  "name": "@probo/react-lazy",
+    "name": "@probo/react-lazy",
-  "version": "0.1.0",
+    "version": "1.0.0",
-  "description": "Enhanced React lazy loading with retries and error handling",
+    "description": "Enhanced React lazy loading with retries and error handling",
-  "type": "module",
+    "private": true,
-  "main": "src/index.ts",
+    "type": "module",
-  "exports": {
+    "main": "src/index.ts",
-    ".": "./src/index.ts"
+    "scripts": {},
-  },
+    "prettier": "@probo/prettier",
-  "license": "MIT",
+    "peerDependencies": {
-  "peerDependencies": {
+        "react": ">18.0.0"
-    "react": ">=16.8.0"
+    },
-  }
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    }
 }

packages/react-lazy/src/index.ts

@@ -5,9 +5,9 @@ import {
   type FC,
 } from "react";
 
-export const DEFAULT_STORAGE_KEY = "reactLazyReloadedFunctions";
+const DEFAULT_STORAGE_KEY = "reactLazyReloadedFunctions";
 
-export class ReloadStorage {
+class ReloadStorage {
   constructor(public readonly storageKey = DEFAULT_STORAGE_KEY) {}
 
   getMap(): Map<string, number> {
@@ -51,24 +51,24 @@ export class ReloadStorage {
   }
 }
 
-export interface ForceReloadConfig {
+type ForceReloadConfig = {
   maxRetries: number;
   storageKey?: string;
-}
+};
 
-export interface LazyConfigInit {
+type LazyConfigInit = {
   forceReload?: false | Partial<ForceReloadConfig>;
   importRetries?: number;
   retryDelay?: number;
   onImportError?: (error: unknown) => void;
-}
+};
 
-export interface LazyConfig {
+type LazyConfig = {
   forceReload: ForceReloadConfig;
   importRetries: number;
   retryDelay: number;
   onImportError?: (error: unknown) => void;
-}
+};
 
 const createConfig = (init: LazyConfigInit = {}): LazyConfig => ({
   forceReload: {
@@ -77,8 +77,8 @@ const createConfig = (init: LazyConfigInit = {}): LazyConfig => ({
     ...(typeof init.forceReload === "object"
       ? init.forceReload
       : init.forceReload === false
-      ? { maxRetries: 0 }
+        ? { maxRetries: 0 }
-      : {}),
+        : {}),
   },
   importRetries:
     typeof init.importRetries === "number"