Fix laggy scroll on change pages

Author: behnamrhp

components/3d-sphere/render/init.js

@@ -20,6 +20,11 @@ let scene,
   renderAspectRatio
 const renderTickManager = new TickManager()
 
+export const onResizeCallback = () => {
+  camera.aspect = renderAspectRatio
+  camera.updateProjectionMatrix()
+  composer.setSize(renderWidth, renderHeight)
+}
 export const initEngine = async (sphereRef) => {
   scene = new Scene()
 
@@ -37,7 +42,6 @@ export const initEngine = async (sphereRef) => {
   // shadow
   renderer.shadowMap.enabled = true
   renderer.shadowMap.type = PCFSoftShadowMap
-  console.log(renderer.domElement)
   sphereRef.current.appendChild(renderer.domElement)
 
   const target = new WebGLRenderTarget(renderWidth, renderHeight, {
@@ -53,14 +57,10 @@ export const initEngine = async (sphereRef) => {
   controls.enableZoom = false
   controls.enablePan = false
 
+  
   window.addEventListener(
     'resize',
-    () => {
-      camera.aspect = renderAspectRatio
-      camera.updateProjectionMatrix()
-      composer.setSize(renderWidth, renderHeight)
-    },
-    false
+    onResizeCallback
   )
 
   renderTickManager.startLoop()

components/Header/index.tsx

@@ -53,9 +53,10 @@ export default function Header({selectedSection, setSelectedSection}: HeaderInt)
             itemTitle={btnTitle}
             routeName={routesList.home}
         >
-            <Link
+            <a
+             rel='preload'
              onClick={ () => setSelectedSection(btnTitle)}
-             href={`${routesList.home}#${btnTitle}`} scroll={false} className="sectionButton">{ btnTitle }</Link>
+             href={`${routesList.home}#${btnTitle}`} className="sectionButton">{ btnTitle }</a>
         </HeaderBtnLi>
     ))
 
@@ -64,12 +65,12 @@ export default function Header({selectedSection, setSelectedSection}: HeaderInt)
     <HeaderWrapper isShowHeader={isShow} className='items-center p-4 sm:p-6 fixed top-0 left-0 w-full z-50'>
       <div className='container mx-auto flex justify-between items-center'>
         <div className='mr-auto font-bold'>
-          <Link className='text-xl sm:text-base' scroll={false} href={`/#${baseHomeSection}`} >SCASS</Link>
+          <a rel='preload' className='text-xl sm:text-base' href={`/#${baseHomeSection}`} >SCASS</a>
         </div>
 
         <ul className="sectionWrapper hidden md:flex justify-around">
             <HeaderBtnLi routeName={routesList.roadmap} currentroute={router.pathname}>
-              <Link href={routesList.roadmap}>{ routesTitle.roadmap }</Link>
+              <a rel='preload' href={routesList.roadmap}>{ routesTitle.roadmap }</a>
             </HeaderBtnLi>
 
             { buttonItem }

components/roadmap/SphereInfo.tsx

@@ -6,6 +6,7 @@ import { medias, roadmapData } from '../../utilities/statics'
 import RoadmapItem from './RoadmapItem'
 import { RoadmapSection, SphereContainer } from './style'
 import { initSphere } from '../3d-sphere/index.js';
+import { onResizeCallback } from '../3d-sphere/render/init'
 
 export interface SphereRectInt { 
   top:number,
@@ -18,7 +19,6 @@ export default function SphereInfo() {
     const isLoadedSphere = useRef(false);
     const [sphereRect, setSphereRect] = useState<SphereRectInt>()
     const [bodyRect, setBodyRect ] = useState<DOMRect>()
-
     useEffect( () => {
       setBodyRect(document.body.getBoundingClientRect())
     }, [])
@@ -35,6 +35,10 @@ export default function SphereInfo() {
       if (isLoadedSphere.current) return;
       isLoadedSphere.current = true 
       initSphere(sphereRef)
+
+      return () => {
+        window.removeEventListener('resize', onResizeCallback)
+      }
     }, [])
 
     const renderedDescriptions = roadmapData.map((data, index) => {