Hi there,
I recently discovered the concept of lazy loading in React. I also understood how it works but i cannot get it to work in R3F. In the code i provide normally there are alot more import statements for other Components, that i switch between with the switch statement. The code runs but always gives back the fallback mesh and not the LAXXL mesh. Does anyone have Experience with implementing that or have another solution to load all those components only if they are used?
import { LA_2R } from "./glatt/LA_2R";
// import { LA_XXL } from "./glatt/LA_XXL";
import { NormLA } from "./glatt/NormLA";
import { NormLA1S2W } from "./glatt/NormLA1S2W";
import { KeinLA } from "./glatt/KeinLA";
import { LA_schmal_Rechteck } from "./glatt/LA_schmal_Rechteck";
import { NormLA1S3W } from "./glatt/NormLA1S3W";
import { SchlitzLA } from "./glatt/SchlitzLA";
import { LA_XS } from "./glatt/LA_XS";
import { Design_LA_Rechteck_30 } from "./glatt/Design_LA_Rechteck_30";
import { LA21 } from "./glatt/LA21";
import { Suspense, lazy } from "react";
const LA_XXL = lazy(() => import("./glatt/LA_XXL"));
export const Lichtausschnitte = ({ STD_FLGL, BR_TB, LA, BGS }) => {
switch (LA) {
case "kein Lichtausschnitt":
return <KeinLA BR_TB={BR_TB} />;
case "LA XXL":
return (
<Suspense
fallback={
<mesh>
<boxGeometry />
</mesh>
}
>
<LA_XXL BR_TB={BR_TB} BGS={BGS} />;
</Suspense>
);
case "Norm-LA":
return <NormLA BR_TB={BR_TB} BGS={BGS} />;
case "Norm-LA mit glasteilenden Sprossen 1 senkr., 2 waagr.":
return <NormLA1S2W BR_TB={BR_TB} BGS={BGS} />;
case "Design-LA 2R":
return <LA_2R BR_TB={BR_TB} BGS={BGS} />;
case "Design-LA Rechteck 30 XL":
return (
<Design_LA_Rechteck_30_XL STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />
);
case "LA schmal Rechteck":
return <LA_schmal_Rechteck STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />;
case "Norm-LA mit glasteilenden Sprossen 1 senkr., 3 waagr.":
return <NormLA1S3W BR_TB={BR_TB} BGS={BGS} />;
case "Schlitz-LA":
return <SchlitzLA STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />;
case "Design-LA XS":
return <LA_XS STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />;
case "Design-LA Rechteck 30":
return (
<Design_LA_Rechteck_30 STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />
);
case "LA 21":
return <LA21 STD_FLGL={STD_FLGL} BR_TB={BR_TB} BGS={BGS} />;
}
};
Greetings Tom