@tramvai/react 2.141.2 → 2.142.1

package/README.md

@@ -126,8 +126,29 @@ const ComponentWrapper = () => {
   return (
     // feel free to use your own implementation
     <UniversalErrorBoundary error={null} fallback={() => null}>
-      <Notifications />
+      <Component />
     </UniversalErrorBoundary>
   );
 };
 ```
+
+### Using Suspense with lazy components
+
+If you are using React 18, you can display fallback UI for lazy component while it is loading. To do so, you need to pass `suspense: true` to lazy method options:
+
+```tsx
+import { Suspense } from 'react';
+import { lazy } from '@tramvai/react';
+
+const Component = lazy(() => import('./Component'), { suspense: true });
+
+const ComponentWrapper = () => {
+  return (
+    <Suspense fallback={<h4>Loading...</h4>}>
+      <Component />
+    </Suspense>
+  );
+};
+```
+
+See more in our [React 18 guide](https://tramvai.dev/docs/guides/react-18#error-handling)!

package/lib/lazy/lazy.d.ts

@@ -3,6 +3,7 @@ import type { TramvaiComponent, TramvaiComponentDecl } from '../typings/componen
 export declare const resolveLazyComponent: (componentOrLoader?: TramvaiComponentDecl) => Promise<TramvaiComponent | undefined>;
 interface Options {
     loading?: JSX.Element;
+    suspense?: boolean;
 }
 /**
  * @private Only for internal usage!

package/lib/lazy/lazy.es.js

@@ -1,5 +1,5 @@
 import hoistStatics from 'hoist-non-react-statics';
-import loadable from '@loadable/component';
+import loadable, { lazy as lazy$1 } from '@loadable/component';
 
 const resolveLazyComponent = async (componentOrLoader) => {
     if (!componentOrLoader) {
@@ -56,6 +56,12 @@ the first argument should be transformed into a special object, but the current
     // @ts-expect-error
     // eslint-disable-next-line no-param-reassign
     load.importAsync = () => originalImportAsync().catch((e) => __lazyErrorHandler(e, originalImportAsync));
+    // There is no typings for `suspense` param in the original `load`
+    // function signature, but it is using internally.
+    // https://github.com/gregberge/loadable-components/blob/09af82568fc6c0aa1c58501d1e6707561186b09b/packages/component/src/createLoadable.js#L361
+    if (options.suspense && process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        return lazy$1(load);
+    }
     return loadable(load, {
         fallback: options.loading,
     });

package/lib/lazy/lazy.js

@@ -65,6 +65,12 @@ the first argument should be transformed into a special object, but the current
     // @ts-expect-error
     // eslint-disable-next-line no-param-reassign
     load.importAsync = () => originalImportAsync().catch((e) => __lazyErrorHandler(e, originalImportAsync));
+    // There is no typings for `suspense` param in the original `load`
+    // function signature, but it is using internally.
+    // https://github.com/gregberge/loadable-components/blob/09af82568fc6c0aa1c58501d1e6707561186b09b/packages/component/src/createLoadable.js#L361
+    if (options.suspense && process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        return loadable.lazy(load);
+    }
     return loadable__default["default"](load, {
         fallback: options.loading,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/react",
-  "version": "2.141.2",
+  "version": "2.142.1",
   "description": "",
   "main": "lib/react.js",
   "typings": "lib/react.d.ts",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@loadable/component": "^5.15.2",
     "@types/loadable__component": "^5.13.4",
-    "@tramvai/types-actions-state-context": "2.141.2",
+    "@tramvai/types-actions-state-context": "2.142.1",
     "hoist-non-react-statics": "^3.3.0"
   },
   "peerDependencies": {