On reload, canvas flashes as a blank square with nextjs 14

[Decryptu]

Hello ! Sorry for not opening an issue, but I'm pretty sure the issue is not coming from your library, but maybe from nextjs, but I cant make my repo public, so I cant open an issue on their github and I was hoping someone here would understand what was wrong in my app.

So I use Cobe in my nextjs typescript app. it works fine, except when I do a page reload, the canvas use by the globe become a white square for a brief moment at the instant you hit refresh, then comes back to normal. Do you know how to solve that ? it happens in both pnpm run dev, and pnpm run build then pnpm run start, the only difference is that its less consistent in pnpm run dev, it only flashes 50% of the time.

I use it inside a component, that is then imported in my home.tsx

I use the latest nextjs stable version, same for all the other stuff I use. I also tried to put the globe code directly inside my home.tsx to see if it was because it was inside a component, but I had the same bug.

// src/components/home/CTA.tsx

import { getTranslations } from 'next-intl/server';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import dynamic from 'next/dynamic';
import Image from "next/image";

const Globe = dynamic(() => import('@/components/home/Globe').then(mod => mod.Globe), { ssr: false });

export async function CTA() {
  const t = await getTranslations('home');

  return (
    <div className="h-full flex flex-col justify-between">
      <Card className="mb-4 relative overflow-hidden">
        <div className="absolute inset-0 bg-card z-10" />
        <div className="absolute inset-0 z-20">
          <div className="absolute bottom-[-10%] right-[-30%] sm:bottom-[-30%] sm:right-[-30%] w-[120%] h-[120%] sm:w-[140%] sm:h-[140%] flex items-end justify-end overflow-hidden">
            <div className="relative w-[300px] h-[300px] sm:w-[380px] sm:h-[380px]">
              <Globe width={380} height={380} />
            </div>
          </div>
        </div>
        <CardContent className="pt-6 relative z-30">
          <p className="text-base text-muted-foreground mb-2">{t("cta2Subtitle")}</p>
          <h3 className="text-3xl font-semibold text-foreground mb-2">
            {t("cta2Title")}
          </h3>
          <p className="text-base text-muted-foreground mb-8 max-w-[60%]">
            {t("cta2Description")}
          </p>
          <Button>{t("ctaButton2")}</Button>
        </CardContent>
      </Card>
...

// src/components/home/Globe.tsx

'use client';

import { useEffect, useRef } from 'react';
import createGlobe from 'cobe';

interface GlobeProps {
    width: number;
    height: number;
  }

  export const Globe: React.FC<GlobeProps> = ({ width, height }) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
      let phi = 3.1;

      const canvasElement = canvasRef.current;
      if (!canvasElement) return;

      const globe = createGlobe(canvasElement, {
      devicePixelRatio: 2,
      width: width * 2,
      height: height * 2,
      phi: 0,
      theta: 0,
      dark: 1,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [0.369, 0.361, 0.992],
      glowColor: [0.369, 0.361, 0.992],
      markers: [
        // Paris
        { location: [48.8566, 2.3522], size: 0.05 },
        // Add more markers as needed
        { location: [40.7128, -74.0060], size: 0.03 }, // New York
        { location: [35.6762, 139.6503], size: 0.03 }, // Tokyo
      ],
      onRender: (state) => {
        state.phi = phi;
        phi += 0.003;
      }
    });

    return () => {
      globe.destroy();
    };
  }, [width, height]);

  return (
    <canvas
      ref={canvasRef}
      style={{ width: width, height: height, maxWidth: "100%", aspectRatio: 1 }}
    />
  );
};

package.json

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "copytypes": "node copyTypes.js"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@tanstack/react-table": "^8.20.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "1.0.0",
    "cobe": "^0.6.3",
    "lucide-react": "^0.416.0",
    "next": "^14.2.5",
    "next-intl": "^3.17.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-markdown": "^9.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "react-tweet": "^3.2.1",
    "recharts": "^2.12.7",
    "remark-gfm": "^4.0.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.1"
  },
  "devDependencies": {
    "@strapi/strapi": "4.25.5",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@types/hast": "^3.0.4",
    "@types/node": "^20.14.15",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-syntax-highlighter": "^15.5.13",
    "axios": "^1.7.4",
    "dotenv": "^16.4.5",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.5",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.4"
  }
}

Thank you :)