refactor: preload license info

src/common/component/BlankPlaceholder.tsx

@@ -12,7 +12,6 @@ import IconInvite from "../../assets/icons/placeholder.invite.svg";
 import IconDownload from "../../assets/icons/placeholder.download.svg";
 import UsersModal from "./UsersModal";
 import { useAppSelector } from "../../app/store";
-import useLicense from "../hook/useLicense";
 
 
 interface Props {
@@ -25,11 +24,10 @@ const classes = {
 };
 const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const { t } = useTranslation("welcome");
-  const { server, isAdmin } = useAppSelector((store) => { return { server: store.server, isAdmin: store.authData.user?.is_admin }; });
+  const { server, isAdmin, upgraded } = useAppSelector((store) => { return { server: store.server, isAdmin: store.authData.user?.is_admin, upgraded: store.server.upgraded }; });
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
   const [createChannelVisible, setCreateChannelVisible] = useState(false);
   const [userListVisible, setUserListVisible] = useState(false);
-  const { upgraded } = useLicense();
   const toggleChannelModalVisible = () => {
     setCreateChannelVisible((prev) => !prev);
   };

src/common/hook/useLicense.ts

@@ -5,13 +5,15 @@ import {
   useUpsertLicenseMutation
 } from "../../app/services/server";
 import { useAppSelector } from "../../app/store";
-
-const useLicense = () => {
+// type Props = {
+//   refetchOnMountOrArgChange?: boolean
+// } | undefined
+const useLicense = (refetchOnMountOrArgChange = false) => {
   const { userCount, isGuest, upgraded } = useAppSelector((store) => {
     return { userCount: store.users.ids.length, isGuest: store.authData.guest, upgraded: store.server.upgraded };
   });
-  const { data: license, refetch: refetchLicense } = useGetLicenseQuery(undefined, {
-    refetchOnMountOrArgChange: true,
+  const { data: license, refetch: refetchLicense, isLoading } = useGetLicenseQuery(undefined, {
+    refetchOnMountOrArgChange,
     skip: isGuest
   });
   const [check, { isLoading: isChecking, isSuccess: checked }] = useCheckLicenseMutation();
@@ -40,6 +42,7 @@ const useLicense = () => {
     reachLimit: userCount >= lUserLimit,
     license,
     checked,
+    isLoading,
     checking: isChecking,
     upserting,
     upserted,

src/common/hook/usePreload.ts

@@ -7,11 +7,13 @@ import { useLazyGetServerQuery } from "../../app/services/server";
 import useStreaming from "./useStreaming";
 import { useAppSelector } from "../../app/store";
 import { useLazyLoadMoreMessagesQuery } from "../../app/services/message";
+import useLicense from "./useLicense";
 // type Props={
 //   guest?:boolean
 // }
 let preloadChannelMsgs = false;
 export default function usePreload() {
+  const { isLoading: loadingLicense } = useLicense(false);
   const [preloadChannelMessages] = useLazyLoadMoreMessagesQuery();
   const { rehydrate, rehydrated } = useRehydrate();
   const {
@@ -85,7 +87,7 @@ export default function usePreload() {
   }, [canStreaming]);
 
   return {
-    loading: usersLoading || serverLoading || favoritesLoading || !rehydrated,
+    loading: usersLoading || serverLoading || favoritesLoading || !rehydrated || loadingLicense,
     error: usersError && serverError && favoritesError,
     success: usersSuccess && serverSuccess && favoritesSuccess,
     data: {

src/routes/setting/License/index.tsx

@@ -27,7 +27,7 @@ const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
 export default function License() {
   const { t, i18n } = useTranslation("setting");
   // const { t: ct } = useTranslation();
-  const { license: licenseInfo, reachLimit, upsertLicense, upserting, upserted } = useLicense();
+  const { license: licenseInfo, reachLimit, upsertLicense, upserting, upserted } = useLicense(true);
   const [modalVisible, setModalVisible] = useState(false);
   const [updateVisible, setUpdateVisible] = useState(false);
   const [base58Fold, setBase58Fold] = useState(true);

src/routes/setting/navs.tsx

@@ -14,7 +14,6 @@ import Version from "../../common/component/Version";
 // import ConfigAgora from "./config/Agora";
 import { useAppSelector } from "../../app/store";
 import ServerVersionChecker from "../../common/component/ServerVersionChecker";
-import useLicense from "../../common/hook/useLicense";
 
 const navs = [
   {
@@ -98,10 +97,9 @@ const navs = [
 ];
 
 const useNavs = () => {
-  const { upgraded } = useLicense();
   const { t } = useTranslation("setting");
-  const loginUser = useAppSelector((store) => {
-    return store.authData.user;
+  const { loginUser, upgraded } = useAppSelector((store) => {
+    return { loginUser: store.authData.user, upgraded: store.server.upgraded };
   });
   const transformedNavs = navs.map(n => {
     const { name, items, ...rest } = n;