only enable queries when tab is selected

apps/web/src/components/Images/Images.queries.ts

@@ -16,7 +16,10 @@ export const useImages = (blogId: string) =>
     queryFn: () => api.images.getAll(blogId),
   });
 
-export const useMediaQuery = (blogId: string) => {
+export const useMediaQuery = (
+  blogId: string,
+  { enabled }: { enabled: boolean }
+) => {
   const supa = getSupabaseBrowserClient();
   const query = useQuery({
     queryKey: ["media", blogId],
@@ -45,6 +48,7 @@ export const useMediaQuery = (blogId: string) => {
         throw new Error(res.error.message);
       }
     },
+    enabled,
   });
 
   return query;

apps/web/src/pages/blogs/[blogId]/posts.tsx

@@ -68,7 +68,9 @@ export function StatePill({ published }: { published: boolean }) {
 export default function BlogPosts() {
   const router = useRouter();
   const blogId = router.query.blogId as string;
+
   const { tabValue, onTabChange } = useRouterTabs("tab");
+
   const [showUploadDialog, setShowUploadDialog] = useState(false);
   const [updateTagDialogOpen, setUpdateTagDialogOpen] = useState(false);
   const [deleteTagDialogOpen, setDeleteTagDialogOpen] = useState(false);
@@ -79,11 +81,18 @@ export default function BlogPosts() {
 
   const isLoading = blogLoading || postsLoading;
 
-  const media = useMediaQuery(blogId);
+  const media = useMediaQuery(blogId, {
+    enabled: tabValue === "media",
+  });
   const deleteMedia = useDeleteMediaMutation();
   const [selectedImages, setSelectedImages] = useState<Image[]>([]);
 
-  const tags = useTagsWithUsageQuery({ blogId });
+  const tags = useTagsWithUsageQuery(
+    { blogId },
+    {
+      enabled: tabValue === "tags",
+    }
+  );
 
   const supabase = getSupabaseBrowserClient();
   const queryClient = useQueryClient();
@@ -325,6 +334,11 @@ export default function BlogPosts() {
             </TabsContent>
             <TabsContent value="tags">
               <div className="rounded-xl border bg-white px-2 py-2 shadow-sm">
+                {tags.isLoading && (
+                  <div className="p-12">
+                    <Spinner />
+                  </div>
+                )}
                 <div className="flex justify-between">
                   <h2 className="px-3 py-1 text-lg font-medium tracking-tight">
                     {tags.data?.length ? `${tags.data?.length} tags` : "Tags"}

apps/web/src/queries/tags.ts

@@ -6,12 +6,19 @@ export const tagKeys = {
   tag: (tagId: string) => ["tag", tagId],
 };
 
-export function useTagsWithUsageQuery({ blogId }: { blogId: string }) {
+export function useTagsWithUsageQuery(
+  { blogId }: { blogId: string },
+  {
+    enabled,
+  }: {
+    enabled: boolean;
+  }
+) {
   const supa = getSupabaseBrowserClient();
 
   return useQuery({
     queryKey: tagKeys.tags([blogId]),
-    enabled: !!blogId,
+    enabled: !!blogId && enabled,
     queryFn: async () => {
       const { data } = await supa
         .from("tag_usage_count_v1")