Skip to content

Commit

Permalink
Revert "refactor: Optimize ParticlesContainer component load svg in b…
Browse files Browse the repository at this point in the history
…atches"

This reverts commit 0fb5bff.
  • Loading branch information
singhAmandeep007 committed Dec 5, 2024
1 parent 0fb5bff commit ba61c5d
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 83 deletions.
75 changes: 3 additions & 72 deletions src/Components/Particles/index.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useState } from "react";

import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";

import type { Container, IMove } from "@tsparticles/engine";

import { techLogoNames } from "@/Common/techlogos";
import { defaultParticlesOptions } from "./particlesOptions";

const BATCH_SIZE = 2;
const BATCH_LOAD_INTERVAL = 100;
import { particlesOptions } from "./particlesOptions";

export const ParticlesContainer = () => {
const [init, setInit] = useState(false);
const [loadedTechLogos, setLoadedTechLogos] = useState<string[]>(techLogoNames.slice(0, BATCH_SIZE));

const particleContainerRef = useRef<Container | null>(null);

// this should be run only once per application lifetime
useEffect(() => {
Expand All @@ -28,77 +19,17 @@ export const ParticlesContainer = () => {
.catch(console.error);
}, []);

useEffect(() => {
if (!init) return;

const interval = setInterval(() => {
setLoadedTechLogos((currentLogos) => {
const nextIndex = currentLogos.length;
const nextBatch = techLogoNames.slice(nextIndex, nextIndex + BATCH_SIZE);

if (nextBatch.length === 0) {
clearInterval(interval);
return currentLogos;
}

return [...currentLogos, ...nextBatch];
});
}, BATCH_LOAD_INTERVAL); // load a batch of size<BATCH_SIZE> every <BATCH_LOAD_INTERVAL>seconds

return () => clearInterval(interval);
}, [init]);

const particlesOptions = useMemo(() => {
const particleOptionsImages = loadedTechLogos.map((loadedTechLogo) => ({
src: `./logos/${loadedTechLogo}.svg`,
}));

return {
...defaultParticlesOptions,
particles: {
...defaultParticlesOptions.particles,
number: {
// @ts-expect-error-next-line
...defaultParticlesOptions.particles.number,
value: loadedTechLogos.length,
},
move: {
// @ts-expect-error-next-line
...defaultParticlesOptions.particles.move,
value: loadedTechLogos.length,
direction: loadedTechLogos.length === techLogoNames.length ? "outside" : "inside",
} as IMove,
shape: {
// @ts-expect-error-next-line
...defaultParticlesOptions.particles.shape,
options: {
image: particleOptionsImages,
},
},
},
};
}, [loadedTechLogos]);

const particlesLoaded = useCallback(async (container?: Container) => {
if (container) {
particleContainerRef.current = container;
}

return Promise.resolve();
}, []);

const particles = useMemo(() => {
if (init) {
return (
<Particles
id="tsparticles"
options={particlesOptions}
particlesLoaded={particlesLoaded}
/>
);
}
return null;
}, [init, particlesOptions, particlesLoaded]);
}, [init]);

return <div style={{ width: 0, height: 0 }}>{particles}</div>;
};
Expand Down
25 changes: 14 additions & 11 deletions src/Components/Particles/particlesOptions.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { techLogos } from "@/Common/techlogos";

import type { ISourceOptions } from "@tsparticles/engine";

const defaultParticlesOptions: ISourceOptions = {
const particlesOptions: ISourceOptions = {
background: {
position: "50% 50%",
repeat: "no-repeat",
Expand All @@ -17,27 +19,29 @@ const defaultParticlesOptions: ISourceOptions = {
density: {
enable: true,
},
value: 40,
},
move: {
direction: "inside",
direction: "none",
enable: true,
outModes: {
default: "out",
},
random: false,
speed: 5,
speed: 3,
straight: false,
},
opacity: {
animation: {
enable: true,
speed: 0.5,
sync: false,
delay: 1,
},
value: { min: 0, max: 0.5 },
},
size: {
value: 16,
value: 18,
},
shape: {
// READ-MORE: https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html
Expand All @@ -52,12 +56,11 @@ const defaultParticlesOptions: ISourceOptions = {
detectRetina: true,
};

// NOTE: to load all images at once
// const particleOptionsImage = Object.values(techLogos).map(({ src }) => ({
// src,
// }));
const particleOptionsImage = Object.values(techLogos).map(({ src }) => ({
src,
}));

// // @ts-expect-error-next-line
// defaultParticlesOptions.particles.shape.options.image = particleOptionsImage;
// @ts-expect-error-next-line
particlesOptions.particles.shape.options.image = particleOptionsImage;

export { defaultParticlesOptions };
export { particlesOptions };

0 comments on commit ba61c5d

Please sign in to comment.