[Bug]: Everything is fine in localhost but after deployment on netlify, initial page is loading is too slow

[rstulug]

Contact Details

rstulug@gmail.com

What happened?

I did not understand why but after deployment on netlify, initial page is loading about 2-3 secs. On local machine everything is fine. I just want to create a simple portfolio

tsParticles Version

^3.0.0

tsParticles Configuration

function App() {
  const [init, setInit] = useState(false);

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
      // starting from v2 you can add only the features you need reducing the bundle size
      //await loadAll(engine);
      //await loadFull(engine);
      await loadSlim(engine);
      //await loadBasic(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = async (container?: Container): Promise<void> => {
    console.log(container);
  };

  const options: ISourceOptions = useMemo(
    () => ({
      background: {
        color: {
          value: "#151616",
        },
      },
      fpsLimit: 120,
      interactivity: {
        events: {
          onClick: {
            enable: false,
            mode: "push",
          },
          onHover: {
            enable: false,
            mode: "repulse",
          },
        },
        modes: {
          push: {
            quantity: 4,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
      particles: {
        color: {
          value: "#ffffff",
        },
        links: {
          color: "#ffffff",
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1,
        },
        collisions: {
          enable: false,
        },
        move: {
          direction: "none",
          enable: true,
          outModes: {
            default: "bounce",
          },
          random: false,
          speed: 1,
          straight: false,
        },
        number: {
          density: {
            enable: true,
          },
          value: 140,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: "circle",
        },
        size: {
          value: { min: 1, max: 5 },
        },
      },
      detectRetina: true,
    }),
    []
  );

  if (init) {
    return (
      <div className="relative ">
        <Particles
          id="tsparticles"
          options={options}
          particlesLoaded={particlesLoaded}
          className="absolute top-0 left-0 w-full h-full -z-10"
        />
        <div className="max-w-screen-xl mx-auto text-white">
          <Navbar />
          <Dashboard />
          <AboutMe />
          <Skills />
          <Experience />
          <Projects />
        </div>
      </div>
    );
  }
  return <div></div>;
}

export default App;

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[matteobruni]

This is a known issue with 3.3.0, first of all, place only <Particles /> component in the init conditional, you portfolio can work fine even without particles for few seconds.

You can install previous tsparticles version to avoid dynamic imports if you experience too much delay, or you can reduce the packages installed installing only the ones needed.

This is under investigation in 3.4.0.

[rstulug]

Thanks for the quick answer. Unfortunately, downgrading did not fix the problem. But I changed slim to basic. There is still a delay but it is now acceptable. Waiting for 3.4.0