import { Button, Flex, Spin, Typography } from "antd";
import { useEffect, useState } from "react";

export function HydrateFallback() {
  const [tooLongTime, setTooLongTime] = useState(false);
  useEffect(() => {
    const id = setTimeout(() => {
      setTooLongTime(true);
    }, 1000 * 10);
    return () => clearTimeout(id);
  }, []);
  return (
    <Flex gap={24} vertical align="center" justify="center" style={{ height: '100vh' }}>
      <Spin spinning />
      {tooLongTime && (
        <Typography.Text>桥豆麻袋，正在努力加载数据中....</Typography.Text>
      )}
    </Flex>
  );
}
