useProgress not appearing in nextjs

[noahtrotman]

Hi,

I've been using drei's useProgress hook to show a loading screen before the glsl shader appears on my home page using nextjs. However, it is no longer working and I am unsure why. I've added code snippets below of it being used.

Loader.js

import { useProgress } from "@react-three/drei";
import styled from "styled-components";
import Logo from '../../public/trotman_logo_wht100.svg'

const StyledLoader = styled.span`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 5rem;
`;

export function Loader() {
  const { active, progress } = useProgress();
  return active ? (
    <StyledLoader>
        <Logo />
        {Math.floor(progress)}%
    </StyledLoader>
  ) : null;
}

Scene.js
(I've put the loader both inside and outside the canvas to see if one would work. Even with only one in either place it still doesn't fire

import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import WaveSlider from "./WaveSlider";
import { Loader } from "./Loader/Loader";

import Cursor from "./Cursor";

export default function Scene() {
  return (
    <>
      <Loader />
      <Cursor />
      <Canvas
        shadowMap
        shadows
        dpr={[2, 2]}
        camera={{ fov: 32, position: [0, 0, 2] }}
      >
        <Suspense fallback={<Loader />}>
          <WaveSlider shadowMap />
        </Suspense>
      </Canvas>
    </>
  );
}