how to use isloading in two separate trpc queries

  const { data: pagesApiData, refetch: pageRefetch,isLoading } =
    trpc.storeWebPage.getWebPages.useQuery(
      { store_id: user?.id },
      {
        refetchOnWindowFocus: false,
        enabled: user?.id ? true : false,
      },
    );



    const LayoutName = ({ layoutId }) => {
      const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
        { id: layoutId },
        {
          refetchOnWindowFocus: false,
          enabled: layoutId ? true : false,
        },
      );
    
      return <>{layoutApiData?.name}</>;
    };

  const { data: pagesApiData, refetch: pageRefetch,isLoading } =
    trpc.storeWebPage.getWebPages.useQuery(
      { store_id: user?.id },
      {
        refetchOnWindowFocus: false,
        enabled: user?.id ? true : false,
      },
    );



    const LayoutName = ({ layoutId }) => {
      const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
        { id: layoutId },
        {
          refetchOnWindowFocus: false,
          enabled: layoutId ? true : false,
        },
      );
    
      return <>{layoutApiData?.name}</>;
    };