fix(react): wrap with React.lazy

scripts/generate-react-exports.js

@@ -28,18 +28,18 @@ for (const module of customElementsModules) {
   const { events, name: componentName, tagName: fileName, jsDoc } = componentDeclaration;
 
   const eventNames = events?.reduce((acc, curr) => {
-    acc[getReactEventName(curr.name)] = curr.name;
-    return acc;
-  }, {}) || {};
+      acc[getReactEventName(curr.name)] = curr.name;
+      return acc;
+    }, {}) || {};
 
   const eventTypes = events?.map(event => {
-    const eventName = getReactEventName(event.name);
-    const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text);
-    const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`;
+      const eventName = getReactEventName(event.name);
+      const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text);
+      const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`;
 
-    eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`);
-    return `${eventName}: EventName<${predefinedEventName}>`;
-  }) || [];
+      eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`);
+      return `${eventName}: EventName<${predefinedEventName}>`;
+    }) || [];
 
   const importPath = path.replace(/^src\//, "").replace(/\.ts$/, "");
   const typeName = componentName + "Type";
@@ -52,13 +52,15 @@ for (const module of customElementsModules) {
   const source = `
   ${jsDoc}
   export const ${componentName}: React.LazyExoticComponent<ReactWebComponent<${componentType}>> =
-  customElements.whenDefined('${fileName}').then(() => createComponent<${componentType}>({
-    react: React,
-    displayName: "${componentName}",
-    tagName: "${fileName}",
-    elementClass: customElements.get("${fileName}"),
-    events: ${JSON.stringify(eventNames)},
-  }));
+  React.lazy(() => customElements.whenDefined('${fileName}').then(() =>
+    createComponent<${componentType}>({
+      react: React,
+      displayName: "${componentName}",
+      tagName: "${fileName}",
+      elementClass: customElements.get("${fileName}"),
+      events: ${JSON.stringify(eventNames)},
+    }))
+  );
   `;
 
   baklavaReactFileParts.push(source);