[React] Particles appear after a few seconds in production

[ChristosHadjichristofi]

Hello,

I have a problem using tsparticles on production. When I'm in development mode it appears as soon as the page loads, but when I push to production and build it appears after some seconds. I've noticed some other discussions that tell it has to do something with the build and that I could use webpack.

(You can see the 'error' here)

Is there any other way?

Thanks for your time.

[matteobruni]

tsparticles/tsparticles#5326

[ChristosHadjichristofi]

So if i understand correctly this 'problem' is under investigation?

My current setup is:

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";
import config from "./config.js";
import { useDarkMode } from "../../contexts/DarkModeContext";
import styles from "./ParticlesBanner.module.scss";

export default function ParticlesBanner() {
    const { isDark } = useDarkMode();
    const [init, setInit] = useState(false);
  
    useEffect(() => {
      initParticlesEngine(async (engine) => {
        await loadSlim(engine);
        setInit(true);
      });
  
    }, []);
  
    const particlesLoaded = (container) => {
      console.log(container);
    };

  const options = useMemo(
    () => (config(isDark)),
    [isDark],
  );

  if (init) {
    return (
      <Particles
        id="tsparticles"
        particlesLoaded={particlesLoaded}
        options={options}
        className={styles.particles}
      />
    );
  }

  return <></>;
};

And in my hero component, I use this ParticlesBanner component.

So there's nothing i can do (besides trying to downgrade or wait), right?

[matteobruni]

Yep, there's a problem with dynamic imports, I expected them to be an improvement but they became a problem

[ChristosHadjichristofi]

Ok! Thanks for the insights.

I'll be waiting for the update!

[ChristosHadjichristofi]

Hello @matteobruni , Is this issue resolved?
Thanks in advance!

[matteobruni]

Yes, tsParticles 3.4.0 was released around 2 weeks ago, no need to update the React package yet