当页面刷新并需要等待React JS中的authUser结果时，如何显示加载器/旋转器？

import React, { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  // 其他组件代码...

  return (
    <div>
      {isLoading && <Spinner />} {/* 根据isLoading状态变量来决定是否显示加载器 */}
      {/* 其他组件内容 */}
    </div>
  );
}

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const handlePageRefresh = () => {
    setIsLoading(true); // 开始显示加载器

    // 执行需要等待的操作，例如authUser请求
    authUser()
      .then((result) => {
        // 处理authUser结果
      })
      .catch((error) => {
        // 处理错误
      })
      .finally(() => {
        setIsLoading(false); // 结束显示加载器
      });
  };

  // 其他组件代码...

  return (
    <div>
      {isLoading && <Spinner />} {/* 根据isLoading状态变量来决定是否显示加载器 */}
      {/* 其他组件内容 */}
    </div>
  );
}

import { Spinner } from 'react-spinners';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  // 其他组件代码...

  return (
    <div>
      {isLoading && <Spinner />} {/* 根据isLoading状态变量来决定是否显示加载器 */}
      {/* 其他组件内容 */}
    </div>
  );
}