1、loading页面
在根目录下增加loading.tsx，这个组件会在页面切换或者数据加载时显示，提升用户体验。
- 配合react-spinners可以实现动画loading
- npm install react-spinners
"use client";
import { PuffLoader} from "react-spinners";
const Loader = () => {
return (
<div className="h-[70vh] flex flex-col justify-center items-center">
<PuffLoader size={100} color="red"></PuffLoader>
</div>
);
};
export default Loader;
2、错误页面
根目录下生成error.tsx即可
"use client";
import { useEffect } from "react";
import EmptyState from "./components/EmptyState";
interface ErrorStateProps{
error:Error
}
const ErrorState:React.FC<ErrorStateProps> = ({
error
}) => {
useEffect(()=>{
console.error(error)
},[error])
return (
<EmptyState title="Uh Oh" subtitle="Something went wrong!"></EmptyState>
);
};
export default ErrorState;
