fix: query only when container view is active

src/apps/editor/components/job-dialog/content/container/use-docker-hub.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from 'use-debounce';
 
 import type { DockerResponse } from '@/editor/domain/docker';
+import { useJobView } from '@/editor/hooks';
 
 const fetchDockerHub = async (searchTerm: string): Promise<DockerResponse> => {
   const response = await fetch(`/api/docker?page_size=25&q=${searchTerm}`, {
@@ -17,11 +18,12 @@ const fetchDockerHub = async (searchTerm: string): Promise<DockerResponse> => {
 
 export const useDockerHub = (term: string) => {
   const [debouncedTerm] = useDebounce(term, 350);
+  const isContainerViewActive = useJobView('con');
 
   const { data, isLoading, isPending, error } = useQuery({
     queryKey: ['docker-images', debouncedTerm],
     queryFn: () => fetchDockerHub(debouncedTerm),
-    enabled: !!debouncedTerm,
+    enabled: !!debouncedTerm && isContainerViewActive,
   });
 
   return { data, isLoading: (isLoading || isPending) && term !== '', error };

src/apps/editor/hooks/index.ts

@@ -4,6 +4,7 @@ export { useChangesStack } from './use-changes-stack';
 export { useDraggable } from './use-draggable';
 export { useExpandable } from './use-expandable';
 export { useSelectedJobId } from './use-selected-job-id';
+export { useJobView } from './use-job-view';
 export { useSizeObserver } from './use-size-observer';
 export { useToggler } from './use-toggler';
 export { useViewport } from './use-viewport';

src/apps/editor/hooks/use-job-view.ts

@@ -0,0 +1,8 @@
+import { useSearchParam } from '@/chain';
+
+import type { Views } from '../components/job-dialog/types';
+
+export const useJobView = (view: Views) => {
+  const { getParam } = useSearchParam();
+  return getParam('view') === view;
+};