Using loadTheme to dynamically change the background color crashes and freezes the whole page

[jamesdward]

Hello, love this package but running into problems with loadTheme. I want to be able to have one canvas and to be able to dynamically change the background and particle colors using a state change. However when using loadTheme it freezes the web page if I try to change background color (particle color is fine). I've simplified the code as much as possible and it still isn't working

const ParticleGallery = () => {
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(
    async (container: Container | undefined) => {
      setTimeout(() => {
        container && container.loadTheme("theme_example");
      }, 3000);
    },
    []
  );

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={{
        fpsLimit: 60,
        fullScreen: {
          enable: false,
          zIndex: 0,
        },
        background: {
          color: "#802129",
        },
        particles: {
          color: {
            value: "#000000",
          },
          number: {
            value: 40,
            density: {
              enable: true,
              value_area: 800,
            },
          },
          shape: {
            type: "square",
          },
          opacity: {
            value: 1,
            random: false,
          },
          size: {
            value: 300,
            random: true,
          },
          move: {
            enable: true,
            speed: 1,
            direction: "none",
            random: false,
            straight: true,
            out_mode: "out",
          },
        },
        interactivity: {
          detect_on: "window",
          events: {
            onHover: {
              enable: true,
              mode: "repulse",
            },
            onClick: {
              enable: true,
              mode: "push",
            },
            resize: true,
          },
          modes: {
            grab: {
              distance: 400,
              lineLinked: {
                opacity: 1,
              },
            },
            bubble: {
              distance: 500,
              size: 500,
              duration: 2,
              opacity: 1,
              speed: 3,
            },
            repulse: {
              distance: 200,
            },
            push: {
              particles_nb: 4,
            },
            remove: {
              particles_nb: 2,
            },
          },
        },
        themes: [
          {
            name: "theme_example",
            options: {
              background: {
                color: "#ffffff",
              },
              particles: {
                color: {
                  value: "#5F65FF",
                },
              },
            },
          },
        ],
        retina_detect: true,
      }}
    />
  );
};

[jamesdward]

@matteobruni further to this I have tried your codepen example https://codepen.io/matteobruni/pen/MWopjRP in React and it also causes the page to freeze when changing theme. Any ideas how I can fix this?

const ParticleGallery = () => {
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(
    async (container: Container | undefined) => {
      container?.canvas.initBackground();
      setTimeout(() => {
        container && container.loadTheme("red");
      }, 3000);
    },
    []
  );

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={{
  themes: [
    {
      name: "light",
      default: {
        value: true,
        mode: "light",
      },
      options: {
        background: {
          color: "#ffffff",
        },
        particles: {
          color: {
            value: ["#000000", "#0000ff"],
          },
        },
      },
    },
    {
      name: "dark",
      default: {
        value: true,
        mode: "dark",
      },
      options: {
        background: {
          color: "#000000",
        },
        particles: {
          color: {
            value: ["#ffffff", "#ff0000"],
          },
        },
      },
    },
    {
      name: "red",
      options: {
        background: {
          color: "#ff0000",
        },
        particles: {
          color: {
            value: ["#ffffff", "#000000"],
          },
        },
      },
    },
    {
      name: "green",
      options: {
        background: {
          color: "#00ff00",
        },
        particles: {
          color: {
            value: ["#000000", "#0000ff"],
          },
        },
      },
    },
    {
      name: "blue",
      options: {
        background: {
          color: "#0000ff",
        },
        particles: {
          color: {
            value: ["#ffffff", "#00ff00"],
          },
        },
      },
    },
    {
      name: "yellow",
      options: {
        background: {
          color: "#ffff00",
        },
        particles: {
          color: {
            value: ["#000000", "#ff0000"],
          },
        },
      },
    },
    {
      name: "cyan",
      options: {
        background: {
          color: "#00ffff",
        },
        particles: {
          color: {
            value: ["#000000", "#ff00ff"],
          },
        },
      },
    },
    {
      name: "grey",
      options: {
        background: {
          color: "#777777",
        },
        particles: {
          color: {
            value: ["#ffffff", "#000000"],
          },
        },
      },
    },
  ],
  fpsLimit: 60,

  particles: {
    number: {
      value: 30,
      density: {
        enable: true,
        value_area: 800,
      },
    },
    shape: {
      type: ["circle", "square"],
    },
    opacity: {
      value: 1,
    },
    size: {
      value: 30,
      random: {
        enable: true,
        minimumValue: 15,
      },
    },
    rotate: {
      value: 0,
      direction: "random",
      animation: {
        speed: 5,
        enable: true,
      },
    },
    move: {
      enable: true,
      speed: 6,
      direction: "none",
      out_mode: "out",
    },
  },
  interactivity: {
    detectsOn: "canvas",
    events: {
      onHover: {
        enable: true,
        mode: "repulse",
      },
      onClick: {
        enable: true,
        mode: "push",
      },
      resize: true,
    },
  },
  detectRetina: true,
}}
    />
  );
};

[matteobruni]

Sorry for the delay, I wasn't home. I have seen the issue, but I don't know why, I need to inspect it deeper. I'll let you know when I have news

[matteobruni]

It will be fixed in the next version, the deep equal library has a bug with circular objects. I've changed it but it will be fixed when the next version will be released

[jamesdward]

Amazing thank you!