准确的加载屏幕反应样条

Question

我正在使用 next.js 渲染样条模型，但“onLoad”不能准确表示加载时间

import Spline from '@splinetool/react-spline';
import { useState } from 'react';


const Computer = () => {

    const [isPhoneLoading, setIsPhoneLoading] = useState(true);

    const handlePhoneLoad = () => {
        setIsPhoneLoading(false);
      };
    return (
    <>
        {isPhoneLoading && <p className='text-5xl'>Loading...</p>}
        <div className='flex h-96 w-full mt-20 mr-20 md:hidden'>
            <div className='w-full'>
                <Spline scene="https://prod.spline.design/jEOSwsR2XIbxiR7J/scene.splinecode" **onLoad={handlePhoneLoad}**/>
            </div>
        </div>
    
    </>
     );
}
 
export default Computer;

    "@splinetool/react-spline": "^2.2.6",
    "@splinetool/runtime": "^0.9.330",
    "spline": "^0.0.0",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "next": "13.4.1",

我看过文档，但没有任何内容

也尝试过这个

const handlePhoneLoad = (e: { disposed: boolean; }) => {
    /* setIsPhoneLoading(false); */
    if (e.disposed)  {
        setIsPhoneLoading(false);
    }
  };

Answer 1

在下一个 js 13 中，延迟加载如下所示：

import dynamic from "next/dynamic";

const Spline = dynamic(() => import("@splinetool/react-spline"), {
  loading: () => <p>Loading...</p>,
});

或者在应用程序中使用loading.tsx可能会有所帮助。

export default function Loading() {
  return <div>Loading...</div>;
}

或者使用react方式，但我不确定它不会搞乱next13。

import { lazy, Suspense } from "react";
const Spline = lazy(() => import("@splinetool/react-spline"));

export default function Scene() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Spline scene="https://..." />
      </Suspense>
    </div>
  );
}

PS：别忘了

"use client";