[IMPL] lazy util

Author: nDriaDev

apps/react-tools-demo/src/constants/components.ts

@@ -134,6 +134,7 @@ export const COMPONENTS = [
 		"isClient",
 		"isAsync",
 		"hotKeyHandler",
-		"detectBrowser"
+		"detectBrowser",
+		"lazy"
 	]
 ] as const;

packages/react-tools/README.md

@@ -137,7 +137,7 @@
 	- [x] isAsync
 	- [x] hotKeyHandler
 	- [x] detectBrowser
-	- [ ] lazy: lazy react-like customized
+	- [x] lazy
 	- [x] defaultSerializer
 	- [x] getBase64
 	- [x] removePropertiesFromArrayObjects

packages/react-tools/src/index.ts

@@ -221,5 +221,6 @@ export {
 	getObjectFromDottedString,
 	mergeObjects,
 	alphanumericCompare,
-	changeStringCase
+	changeStringCase,
+	lazy
 } from './utils'

packages/react-tools/src/utils/index.ts

@@ -16,4 +16,5 @@ export { getKeyObjectFromValue } from './getKeyObjectFromValue';
 export { getObjectFromDottedString } from './getObjectFromDottedString';
 export { mergeObjects } from './mergeObjects';
 export { alphanumericCompare } from './alphanumericCompare';
-export { changeStringCase } from './changeStringCase';
+export { changeStringCase } from './changeStringCase';
+export { lazy } from './lazy';

packages/react-tools/src/utils/lazy.ts

@@ -0,0 +1,17 @@
+import { lazy as legacy, ComponentType, LazyExoticComponent } from "react";
+
+/**
+ * **`lazy`**: Wrapper around _React.lazy_ with possibility to execute a function before and after component loading.
+ * @param {() => Promise<{ default: T }>} load - function that returns a Promise or another thenable.
+ * @param {()=> void} beforeLoad - function that will be executed before load component.
+ * @param {()=> void} afterLoad - function that will be executed after load component.
+ * @returns {LazyExoticComponent<T>} result - a React component you can render in your tree.
+ */
+export const lazy = <T extends ComponentType<unknown>>(load: () => Promise<{ default: T }>, beforeLoad?: () => void, afterLoad?: () => void): LazyExoticComponent<T> => {
+	return legacy(() => {
+		!!beforeLoad && beforeLoad();
+		const promise = load();
+		!!afterLoad && promise.then(() => afterLoad());
+		return promise;
+	})
+};