fix: debug the loading problem

src/app/services/channel.ts

@@ -39,7 +39,7 @@ export const channelApi = createApi({
     createChannel: builder.mutation<{ gid: number; created_at: number } | number, CreateChannelDTO>(
       {
         query: (data) => ({
-          url: "group",
+          url: "/group",
           method: "POST",
           body: data
         })

src/components/Loading.tsx

@@ -8,9 +8,10 @@ import Button from "./styled/Button";
 interface Props {
   reload?: boolean;
   fullscreen?: boolean;
+  context?: string;
 }
 
-const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
+const Loading: FC<Props> = ({ reload = false, fullscreen = false, context = "" }) => {
   const [reloadVisible, setReloadVisible] = useState(false);
   const { clearLocalData } = useLogout();
   const handleReload = () => {
@@ -31,6 +32,7 @@ const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
 
   return (
     <div
+      data-ctx={context}
       className={clsx(
         "w-full h-full flex-center flex-col gap-4 dark:bg-gray-800/80",
         fullscreen ? "w-screen h-screen" : ""

src/components/RequireAuth.tsx

@@ -18,12 +18,28 @@ const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
   const location = useLocation();
   const matches = matchRoutes(GuestAllows, location);
   const allowGuest = matches ? !!matches[0].pathname : false;
-  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
-  const { isLoading: checkingInitialized } = useGetInitializedQuery();
+  const {
+    data: loginConfig,
+    isUninitialized: loginConfigUninitialized,
+    isLoading: loginConfigLoading
+  } = useGetLoginConfigQuery(undefined, {
+    refetchOnMountOrArgChange: true
+  });
+  const { isUninitialized: initializedUninitialized, isLoading: initLoading } =
+    useGetInitializedQuery(undefined, {
+      refetchOnMountOrArgChange: true
+    });
   const { token, guest, initialized } = useAppSelector((store) => store.authData);
-
+  console.info(
+    "uninitialized",
+    initializedUninitialized,
+    initializedUninitialized,
+    loginConfigLoading,
+    initLoading
+  );
   // 初始化和login配置检查
-  if (checkingInitialized || !loginConfigSuccess) return <Loading fullscreen={true} />;
+  if (initializedUninitialized || loginConfigUninitialized)
+    return <Loading fullscreen={true} context="auth-route" />;
   //  未初始化 则先走setup 流程
   if (!initialized) return <Navigate to={`/onboarding`} replace />;
   // 开启guest 并且没token 而且是允许guest访问的路由  则先去过渡页登录
@@ -43,7 +59,6 @@ const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
   }
   // 登陆者是guest，并且不允许访问
   if (token && guest && !allowGuest) return <Navigate to={"/"} replace />;
-  // console.log("authhhhh", allowGuest, token, guest);
   const tryPath = localStorage.getItem(KEY_LOCAL_TRY_PATH);
   if (tryPath) {
     localStorage.removeItem(KEY_LOCAL_TRY_PATH);

src/routes/home/index.tsx

@@ -42,16 +42,17 @@ function HomePage() {
       roleChanged: store.authData.roleChanged
     };
   });
+  // preload basic data
   const { success } = usePreload();
   useEffect(() => {
     if (isChatHomePath) {
       dispatch(updateRememberedNavs({ key: "chat", path: "/chat" }));
     }
   }, [isChatHomePath]);
-  console.log("ttss", success);
 
+  console.info("preload success", success);
   if (!success) {
-    return <Loading reload={true} fullscreen={true} />;
+    return <Loading reload={true} fullscreen={true} context="home-route" />;
   }
   const isSettingPage = pathname.startsWith("/setting");
   const isChattingPage = isHomePath || pathname.startsWith("/chat");
@@ -60,7 +61,6 @@ function HomePage() {
   }
   // 有点绕
   const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
-  // console.log("navvvv", isChatHomePath, chatPath);
   const userNav = userPath || "/users";
   const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg md:hover:bg-gray-800/10`;
   return (

src/routes/lazy.tsx

@@ -7,7 +7,7 @@ type Props = {
 };
 
 const Lazy: FC<Props> = ({ children }) => {
-  return <Suspense fallback={<Loading fullscreen={true} />}>{children}</Suspense>;
+  return <Suspense fallback={<Loading fullscreen={true} context="lazy" />}>{children}</Suspense>;
 };
 
 export default Lazy;