do not use react lazy (#6033)

* do not use react lazy

* how about this

* how about this

Author: adhami3310

reflex/compiler/templates.py

@@ -378,7 +378,11 @@ def context_template(
   return ({{ children, ...props }}) => {{
     const [Component, setComponent] = useState(null);
     useEffect(() => {{
-      setComponent(component);
+      async function load() {{
+        const comp = await component();
+        setComponent(() => comp);
+      }}
+      load();
     }}, []);
     return Component ? jsx(Component, props, children) : null;
   }};

reflex/components/component.py

@@ -2232,7 +2232,6 @@ def _get_imports(self) -> ParsedImportDict:
         """
         # React lazy import mechanism.
         dynamic_import = {
-            "react": [ImportVar(tag="lazy")],
             f"$/{constants.Dirs.UTILS}/context": [ImportVar(tag="ClientSide")],
         }
 
@@ -2265,13 +2264,13 @@ def _get_dynamic_imports(self) -> str:
             # https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-named-exports
             f".then((mod) => mod.{self.tag})"
             if not self.is_default
-            else ".then((mod) => mod.default)"
+            else ".then((mod) => mod.default.default ?? mod.default)"
         )
         return (
-            f"const {self.alias or self.tag} = ClientSide(lazy(() => "
+            f"const {self.alias or self.tag} = ClientSide(() => "
             + library_import
             + mod_import
-            + "))"
+            + ")"
         )
 
 

reflex/components/plotly/plotly.py

@@ -288,11 +288,11 @@ def dynamic_plotly_import(name: str, package: str) -> str:
         The dynamic import for the plotly component.
     """
     library_import = f"import('{package}')"
-    mod_import = ".then((mod) => ({ default: createPlotlyComponent(mod) }))"
+    mod_import = ".then((mod) => createPlotlyComponent(mod))"
     return f"""
-const {name} = ClientSide(lazy(() =>
+const {name} = ClientSide(() =>
     {library_import}{mod_import}
-))
+)
 """