Particles lose performance when I click through the subpages in Gatsby

[mafiusu]

I have successfully integrated this lib into my Gatsby project. It works very well, except for the following: When I click through the subpages the particles lose performance. The particles start to hang and no longer move as fluid as before.

This is my config file for the particle animation:

const percentValue = 1.275;
const minParticleSize = 7; // mobile / 1.2
const maxParticleSize = minParticleSize * percentValue;
const minimumOpacityParticle = 0.6;
const particleDensity = 30; // 15 for subpages // Mobile 50%

export default {
  particles: {
    collisions: true,
    number: {
      value: particleDensity,
      max: -1,
      density: {
        enable: true,
        area: 1200,
      },
    },
    color: {
      value: "#3C2BFF",
    },
    shape: {
      type: ShapeType.images,
      image: [
        {
          src: ParticlePNG,
          height: maxParticleSize,
          width: maxParticleSize,
        },
      ],
    },
    stroke: {
      width: 0,
      color: "#000000",
    },
    opacity: {
      value: 1,
      random: { enable: true, minimumValue: minimumOpacityParticle },
      anim: {
        enable: false,
        speed: 1,
        minimumValue: 0.1,
        sync: false,
      },
    },
    size: {
      value: maxParticleSize /* max value */,
      random: { enable: true, minimumValue: minParticleSize /* min value */ },
      anim: {
        enable: false,
        speed: 40,
        minimumValue: 0,
        sync: false,
      },
    },
    links: {
      enable: false,
    },
    move: {
      enable: true,
      speed: 1.2,
      direction: MoveDirection.none,
      random: { enable: true, minimumValue: 1.0 },
      straight: false,
      outMode: "out",
      bounce: true,
      attract: {
        enable: true,
        rotateX: 3000,
        rotateY: 3000,
      },
    },
  },
  interactivity: {
    detectsOn: InteractivityDetect.window,
    events: {
      onHover: {
        enable: true,
        mode: HoverMode.repulse,
      },
      onClick: {
        enable: false,
        mode: ClickMode.push,
      },
      resize: true,
    },
    modes: {
      grab: {
        distance: 180,
        links: {
          opacity: 0.35,
        },
      },
      bubble: {
        distance: 200,
        size: 80,
        duration: 0.4,
      },
      repulse: {
        distance: 200,
        duration: 0.1,
        speed: 0.1,
      },
      attract: {
        duration: 0.1,
        //size: 10000,
        speed: 10,
        //value: 1000,
        distance: 500,
      },
      push: {
        quantity: 8,
      },
      remove: {
        quantity: 2,
      },
    },
  },
  detectRetina: true,
  fpsLimit: 30,
  polygon: {
    enable: false,
    scale: 1,
    type: PolygonMaskType.inline,
    inline: {
      arrangement: PolygonMaskInlineArrangement.onePerPoint,
    },
    draw: {
      enable: false,
      stroke: {
        width: 0.5,
        color: "rgba(255, 255, 255, .1)",
      },
    },
    move: {
      radius: 10,
      type: PolygonMaskMoveType.path,
    },
    url: "",
  },
};

And this is how I use the particle. I put the particle inside a div with position relative. The content of my website is position absolute with a z-index to display above the particle div. The height of the particle container is based of the height of the content. It's calculated at the beginning.

<div
        style={{
          position: "relative",
          top: 0,
          left: 0,
        }}
      >
        <Particles
          height={particleHeight} // HEIGHT BASED ON THE ABSOLUTE CONTENT
          className="bg-safiaBlue"
          params={isMobile ? ParticleConfigMobile : ParticleConfig}
        />

        <div ref={particleDiv} className="absolute top-0 w-full">
            CONTENT ABSOLUTE
        </div>
</div>