feat(#72): added Suspense wrapper for the modals

Author: Quernest

README.md

@@ -60,14 +60,26 @@ root.render(
 );
 ```
 
-## Compatibility
+## API
 
-For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider.
+### Modal Provider
+| Property | Type | Default | Description | Required |
+|--|--|--|--|--|
+| `legacy` | `Boolean` | `false` | Set to `true` if you want to use mui < 5 version. | false |
+| `suspense` | `Boolean` | `true` | Wraps your modal with the [Suspense](https://beta.reactjs.org/reference/react/Suspense) | false |
+| `fallback` | `Nullable<ReactNode>` | `null` | Custom component for the Suspense [fallback](https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) prop | false |
+| `children` | `ReactNode` | `undefined` | - | true
+
+*The rest will be added later... Look at examples* 😊
 
 ## Examples
 
 See more examples in [example](https://github.com/Quernest/mui-modal-provider/tree/master/example) folder
 
+## Compatibility
+
+For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider.
+
 ## Developing & linking locally
 
 Because this module utilizes react hooks, it must be linked in a special way that is described here in this [react github issue comment](https://github.com/facebook/react/issues/14257#issuecomment-439967377)

example/src/app.tsx

@@ -3,7 +3,6 @@ import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 
 import { useModal } from '../../src';
-
 import {
   SimpleDialog,
   NestedDialog,
@@ -12,6 +11,10 @@ import {
   TransitionModal,
 } from './components';
 
+const SimpleLazyLoadedDialog = React.lazy(() =>
+  import('./components/dialogs/simple-dialog-for-lazy-loading')
+);
+
 const App = () => {
   const { showModal } = useModal();
 
@@ -59,6 +62,15 @@ const App = () => {
           simple dialog
         </Button>
       </Grid>
+      <Grid item>
+        <Button
+          variant="contained"
+          onClick={() => showModal(SimpleLazyLoadedDialog)}
+          color="primary"
+        >
+          simple lazy loaded dialog
+        </Button>
+      </Grid>
       <Grid item>
         <Button
           variant="contained"

example/src/components/dialogs/simple-dialog-for-lazy-loading.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+
+const SimpleDialogForLazyLoading: React.FC<DialogProps> = props => (
+  <Dialog {...props}>
+    <DialogTitle>Simple Dialog</DialogTitle>
+  </Dialog>
+);
+
+export default SimpleDialogForLazyLoading;

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "name": "mui-modal-provider",
   "author": "Quernest",
@@ -70,7 +70,8 @@
     ],
     "coverageReporters": [
       "json",
-      "text"
+      "text",
+      "html"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/"

src/modal-provider.test.tsx

@@ -6,6 +6,7 @@ import ModalContext from './modal-context';
 import {
   LegacyModalProviderWrapper as legacyWrapper,
   ModalProviderWrapper as wrapper,
+  NoSuspenseModalProviderWrapper as noSuspenseWrapper,
   OnCloseEvent,
   OnExitedEvent,
 } from './test-utils';
@@ -186,7 +187,7 @@ describe('ModalProvider', () => {
 
   it('should fire TransitionProps.onExited prop event on hide', () => {
     const { result } = renderHook(() => React.useContext(ModalContext), {
-      wrapper,
+      wrapper: noSuspenseWrapper,
     });
 
     const onExited = jest.fn();

src/modal-provider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, Fragment, Suspense } from 'react';
 import ModalContext from './modal-context';
 import reducer, { initialState, Types } from './reducer';
 import {
@@ -15,16 +15,28 @@ import {
 import { uid } from './utils';
 
 export interface ModalProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
   /**
    * Enable it if you want to use mui < 5 version
    */
   legacy?: boolean;
+  /**
+   * Enable it if you want to wrap the modals with the Suspense feature.
+   * @see https://beta.reactjs.org/reference/react/Suspense
+   */
+  suspense?: boolean;
+  /**
+   * Custom fallback for the Suspense fallback
+   * @see https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading
+   */
+  fallback?: ReactNode | null;
 }
 
 export default function ModalProvider({
   children,
   legacy = false,
+  suspense = true,
+  fallback = null,
 }: ModalProviderProps) {
   const [state, dispatch] = React.useReducer(reducer, initialState);
 
@@ -178,6 +190,8 @@ export default function ModalProvider({
       );
     });
 
+  const SuspenseWrapper = suspense ? Suspense : Fragment;
+
   return (
     <ModalContext.Provider
       value={{
@@ -190,7 +204,7 @@ export default function ModalProvider({
       }}
     >
       {children}
-      {renderState()}
+      <SuspenseWrapper fallback={fallback}>{renderState()}</SuspenseWrapper>
     </ModalContext.Provider>
   );
 }

src/test-utils/index.tsx

@@ -18,6 +18,10 @@ export const LegacyModalProviderWrapper: FC<Props> = ({ children }) => (
   <ModalProvider legacy>{children}</ModalProvider>
 );
 
+export const NoSuspenseModalProviderWrapper: FC<Props> = ({ children }) => (
+  <ModalProvider suspense={false}>{children}</ModalProvider>
+);
+
 export const ModalContextProviderWrapper: FC<Props> = ({ children }) => (
   <ModalContext.Provider value={initialContextState}>
     {children}