Use startTransition

scripts/generate-sitemap.js

@@ -16,7 +16,7 @@ function addPage(page) {
 
  return ` <url>
  <loc>${`${process.env.NEXT_PUBLIC_WEBSITE_URL}${route}`}</loc>
- <changefreq>hourly</changefreq>
+ <changefreq>monthly</changefreq>
  </url>`;
 }
 
@@ -30,7 +30,7 @@ async function addPost(post) {
 
  return ` <url>
  <loc>${`${process.env.NEXT_PUBLIC_WEBSITE_URL}${path}`}</loc>
- <changefreq>hourly</changefreq>
+ <changefreq>monthly</changefreq>
  </url>`;
 }
 

src/components/Carousel/Carousel.js

@@ -73,7 +73,9 @@ export const Carousel = ({ width, height, images, placeholder, ...rest }) => {
  renderer.current = new WebGLRenderer({
  canvas: canvas.current,
  antialias: false,
+ alpha: true,
  powerPreference: 'high-performance',
+ failIfMajorPerformanceCaveat: true,
  });
  camera.current = new OrthographicCamera(...cameraOptions);
  scene.current = new Scene();

src/components/Model/Model.js

@@ -1,6 +1,13 @@
 import { animate, useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport } from 'hooks';
-import { createRef, useCallback, useEffect, useRef, useState } from 'react';
+import {
+ createRef,
+ startTransition,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
 import {
  AmbientLight,
  Color,
@@ -84,6 +91,7 @@ export const Model = ({
  alpha: true,
  antialias: false,
  powerPreference: 'high-performance',
+ failIfMajorPerformanceCaveat: true,
  });
 
  renderer.current.setPixelRatio(2);
@@ -380,8 +388,6 @@ const Device = ({
  let loadFullResTexture;
  let playAnimation;
 
- const image = await resolveSrcFromSrcSet(texture);
-
  const [placeholder, gltf] = await Promise.all([
  await textureLoader.current.loadAsync(texture.placeholder.src),
  await modelLoader.loadAsync(url),
@@ -407,6 +413,7 @@ const Device = ({
  applyScreenTexture(placeholder, placeholderScreen.current);
 
  loadFullResTexture = async () => {
+ const image = await resolveSrcFromSrcSet(texture);
  const fullSize = await textureLoader.current.loadAsync(image);
  await applyScreenTexture(fullSize, node);
 
@@ -508,7 +515,9 @@ const Device = ({
  }
  };
 
- onLoad();
+ startTransition(() => {
+ onLoad();
+ });
 
  return () => {
  animation?.stop();

src/components/Navbar/navData.js

@@ -7,10 +7,10 @@ export const navLinks = [
  label: 'Details',
  pathname: '/#details',
  },
- {
- label: 'Articles',
- pathname: '/articles',
- },
+ // {
+ //  label: 'Articles',
+ //  pathname: '/articles',
+ // },
  {
  label: 'Contact',
  pathname: '/contact',

src/hooks/index.js

@@ -1,11 +1,11 @@
 export * from './useAppContext';
 export * from './useFormInput';
+export * from './useFoucFix';
+export * from './useHasMounted';
 export * from './useInterval';
 export * from './useInViewport';
 export * from './useLocalStorage';
 export * from './useParallax';
 export * from './usePrevious';
-export * from './useWindowSize';
 export * from './useScrollToHash';
-export * from './useFoucFix';
-export * from './useHasMounted';
+export * from './useWindowSize';

src/layouts/Home/DisplacementSphere.js

@@ -12,7 +12,6 @@ import {
  PerspectiveCamera,
  Scene,
  SphereBufferGeometry,
- UniformsLib,
  UniformsUtils,
  Vector2,
  WebGLRenderer,
@@ -56,7 +55,9 @@ export const DisplacementSphere = props => {
  renderer.current = new WebGLRenderer({
  canvas: canvasRef.current,
  antialias: false,
+ alpha: true,
  powerPreference: 'high-performance',
+ failIfMajorPerformanceCaveat: true,
  });
  renderer.current.setSize(innerWidth, innerHeight);
  renderer.current.setPixelRatio(1);
@@ -70,8 +71,6 @@ export const DisplacementSphere = props => {
  material.current = new MeshPhongMaterial();
  material.current.onBeforeCompile = shader => {
  uniforms.current = UniformsUtils.merge([
- UniformsLib['ambient'],
- UniformsLib['lights'],
  shader.uniforms,
  { time: { type: 'f', value: 0 } },
  ]);

src/layouts/Home/Home.js

@@ -18,7 +18,7 @@ import { ProjectSummary } from 'layouts/Home/ProjectSummary';
 import { useEffect, useRef, useState } from 'react';
 import styles from './Home.module.css';
 
-const disciplines = ['Developer', 'Prototyper', 'Animator', 'Illustrator', 'Mod maker'];
+const disciplines = ['Developer', 'Prototyper', 'Animator', 'Illustrator', 'Modder'];
 
 export const Home = () => {
  const [visibleSections, setVisibleSections] = useState([]);

src/pages/projects/smart-sparrow/Earth.js

@@ -15,6 +15,7 @@ import { useInViewport, useWindowSize } from 'hooks';
 import {
  createContext,
  memo,
+ startTransition,
  useCallback,
  useContext,
  useEffect,
@@ -193,7 +194,9 @@ export const Earth = ({
  renderer.current = new WebGLRenderer({
  canvas: canvas.current,
  antialias: false,
+ alpha: true,
  powerPreference: 'high-performance',
+ failIfMajorPerformanceCaveat: true,
  });
  renderer.current.setPixelRatio(1);
  renderer.current.outputEncoding = sRGBEncoding;
@@ -394,13 +397,13 @@ export const Earth = ({
  }
  };
 
- setTimeout(() => {
+ startTransition(() => {
  handleLoad();
- }, 2000);
 
- setTimeout(() => {
- setLoaderVisible(true);
- }, 3000);
+ setTimeout(() => {
+ setLoaderVisible(true);
+ }, 1000);
+ });
  }, [loaded, position, scale]);
 
  useEffect(() => {

src/pages/projects/volkihar-knight/Armor.js

@@ -10,7 +10,7 @@ import { tokens } from 'components/ThemeProvider/theme';
 import { Transition } from 'components/Transition';
 import { useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport } from 'hooks';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { startTransition, useCallback, useEffect, useRef, useState } from 'react';
 import {
  ACESFilmicToneMapping,
  CubeTextureLoader,
@@ -63,6 +63,7 @@ export const Armor = ({
  alpha: true,
  antialias: false,
  powerPreference: 'high-performance',
+ failIfMajorPerformanceCaveat: true,
  });
 
  renderer.current.setPixelRatio(2);
@@ -126,13 +127,13 @@ export const Armor = ({
  renderFrame();
  };
 
- setTimeout(() => {
+ startTransition(() => {
  load();
- }, 2000);
 
- setTimeout(() => {
- setLoaderVisible(true);
- }, 3000);
+ setTimeout(() => {
+ setLoaderVisible(true);
+ }, 1000);
+ });
 
  const unsubscribeX = rotationX.onChange(value => {
  modelGroup.current.rotation.x = value;

src/utils/three.js

@@ -48,7 +48,6 @@ export const cleanMaterial = material => {
  */
 export const cleanRenderer = renderer => {
  renderer.dispose();
- renderer.forceContextLoss();
  renderer = null;
 };