fix: optimize data fetching and skeleton loading states

- Reduce polling intervals from 2s to 5s for better performance
- Add selective field queries to exclude heavy log arrays
- Split build detail into separate metadata and log queries
- Implement conditional polling for build logs (only when running)
- Fix skeleton display to show only on initial load without data
- Improve loading state checks to prevent flash on subsequent refreshes

Author: Pascal Klesse

projects/app/src/pages/index.vue

@@ -50,7 +50,7 @@ const { open } = useModal();
 const { open: openMenu } = useContextMenu();
 const { currentUserState: user } = useAuthState();
 
-usePolling(refresh, { interval: 2000 });
+usePolling(refresh, { interval: 5000 });
 
 onMounted(() => {
   const expandedStorage = useLocalStorage<string[]>('expanded', []);
@@ -276,7 +276,7 @@ function showProjectContextMenu(project: Project) {
 <template>
   <div class="pt-[63px] w-full">
     <ClientOnly>
-      <div v-if="status === 'pending'" class="flex flex-col gap-2 p-4">
+      <div v-if="status === 'pending' && !data?.length" class="flex flex-col gap-2 p-4">
         <Skeleton class="h-14 w-full" />
         <Skeleton class="h-14 w-full" />
         <Skeleton class="h-14 w-full" />

projects/app/src/pages/projects/[id]/[containerId].vue

@@ -25,13 +25,34 @@ const { data: project, status: projectStatus } = await useAsyncGetProjectQuery(
 );
 const projectName = computed<null | string>(() => project.value?.name || null);
 
+// Only fetch fields needed for the container detail view - excludes heavy logs array
 const {
   data,
   refresh,
   status: containerStatus,
-} = await useAsyncGetContainerQuery({ id: containerId.value }, null, false, { lazy: true });
+} = await useAsyncGetContainerQuery(
+  { id: containerId.value },
+  [
+    'id',
+    'name',
+    'status',
+    'kind',
+    'url',
+    'ssl',
+    'exposedPort',
+    'healthCheckCmd',
+    'customDockerfile',
+    'lastEditedAt',
+    'lastDeployedAt',
+    { basicAuth: ['username', 'pw'] },
+  ],
+  false,
+  { lazy: true },
+);
 const container = computed<Container | null>(() => data.value || null);
-const isLoading = computed<boolean>(() => projectStatus.value === 'pending' || containerStatus.value === 'pending');
+const isInitialLoading = computed<boolean>(
+  () => (projectStatus.value === 'pending' && !project.value) || (containerStatus.value === 'pending' && !data.value),
+);
 
 const stoppable = computed(
   () =>
@@ -202,7 +223,7 @@ async function get1PasswordContent() {
 
 <template>
   <div class="w-full flex flex-col h-full">
-    <div v-if="isLoading" class="mt-10 p-4 flex flex-col gap-4">
+    <div v-if="isInitialLoading" class="mt-10 p-4 flex flex-col gap-4">
       <Skeleton class="h-10 w-full" />
       <Skeleton class="h-12 w-full" />
       <Skeleton class="h-64 w-full" />

projects/app/src/pages/projects/[id]/[containerId]/backup.vue

@@ -47,7 +47,10 @@ const { data: containerData, status: containerStatus } = await useAsyncGetContai
   false,
   { lazy: true },
 );
-const isLoading = computed<boolean>(() => backupStatus.value === 'pending' || containerStatus.value === 'pending');
+const isInitialLoading = computed<boolean>(
+  () =>
+    (backupStatus.value === 'pending' && !data.value) || (containerStatus.value === 'pending' && !containerData.value),
+);
 const backup = computed<Backup>(() => data.value);
 const container = computed<Container>(() => containerData.value);
 const selectedBackup = ref(undefined);
@@ -350,7 +353,7 @@ async function uploadBackup(e: any) {
 
 <template>
   <div class="w-full dark:text-white">
-    <div v-if="isLoading" class="flex flex-col gap-4 p-4">
+    <div v-if="isInitialLoading" class="flex flex-col gap-4 p-4">
       <Skeleton class="h-12 w-full" />
       <Skeleton class="h-64 w-full" />
     </div>

projects/app/src/pages/projects/[id]/[containerId]/builds.vue

@@ -21,10 +21,18 @@ const {
   data: buildData,
   refresh: refreshBuilds,
   status,
-} = await useAsyncFindBuildsForContainerQuery({ containerId: containerId.value }, null, false, { lazy: true });
+  // Only fetch fields needed for the list - excludes heavy `log` array
+} = await useAsyncFindBuildsForContainerQuery(
+  { containerId: containerId.value },
+  ['id', 'status', 'createdAt', 'finishedAt'],
+  false,
+  {
+    lazy: true,
+  },
+);
 const builds = computed(() => buildData.value || []);
 
-usePolling(refreshBuilds, { interval: 2000 });
+usePolling(refreshBuilds, { interval: 5000 });
 
 onMounted(async () => {
   if (builds.value?.length) {
@@ -56,7 +64,7 @@ async function stop(id: string) {
 
 <template>
   <div class="w-full h-full overflow-hidden relative">
-    <div v-if="status === 'pending'" class="flex flex-col gap-2 p-4">
+    <div v-if="status === 'pending' && !buildData?.length" class="flex flex-col gap-2 p-4">
       <Skeleton class="h-32 w-full" />
       <Skeleton class="h-32 w-full" />
     </div>

projects/app/src/pages/projects/[id]/[containerId]/builds/[buildId].vue

@@ -11,21 +11,65 @@ definePageMeta({
   breadcrumbs: 'Logs',
 });
 
+// ============================================================================
+// Variables
+// ============================================================================
+
 const route = useRoute();
 const buildId = ref<string>(route.params.buildId ? (route.params.buildId as string) : '');
-const { data: buildData, refresh: refreshBuild } = await useAsyncGetBuildQuery({ id: buildId.value }, null);
-const build = computed(() => buildData.value || null);
 
-usePolling(
-  async () => {
-    if (build.value) {
-      await refreshBuild();
+// Metadata query (without heavy log array)
+const { data: buildMeta, refresh: refreshMeta } = await useAsyncGetBuildQuery({ id: buildId.value }, [
+  'id',
+  'status',
+  'createdAt',
+  'finishedAt',
+]);
+
+// Logs query (separate to enable conditional polling)
+const { data: buildLogs, refresh: refreshLogs } = await useAsyncGetBuildQuery({ id: buildId.value }, ['log']);
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+
+const isRunning = computed<boolean>(
+  () => buildMeta.value?.status === BuildStatus.RUNNING || buildMeta.value?.status === BuildStatus.QUEUE,
+);
+
+const log = computed<string[]>(() => buildLogs.value?.log ?? []);
+
+// ============================================================================
+// Polling
+// ============================================================================
+
+// Always poll metadata to track status changes
+usePolling(refreshMeta, { interval: 2000 });
+
+// Conditional polling for logs - only when build is running
+const { pause: pauseLogPolling, resume: resumeLogPolling } = usePolling(refreshLogs, {
+  immediate: isRunning.value,
+  interval: 2000,
+});
+
+// Watch for status changes to control log polling
+watch(
+  isRunning,
+  async (running: boolean, wasRunning: boolean | undefined) => {
+    if (running) {
+      resumeLogPolling();
+    } else {
+      pauseLogPolling();
+      // Final refresh when build completes
+      if (wasRunning) {
+        await refreshLogs();
+      }
     }
   },
-  { interval: 2000 },
+  { immediate: false },
 );
 </script>
 
 <template>
-  <Log class="w-full" :log="build?.log" :running="build?.status === BuildStatus.RUNNING" max-height="100%" />
+  <Log class="w-full" :log="log" :running="isRunning" max-height="100%" />
 </template>

projects/app/src/pages/projects/[id]/[containerId]/logs.vue

@@ -24,7 +24,7 @@ usePolling(refreshLogs, { interval: 5000 });
 
 <template>
   <div class="w-full h-full">
-    <div v-if="status === 'pending'" class="flex flex-col gap-2 p-4">
+    <div v-if="status === 'pending' && !logData" class="flex flex-col gap-2 p-4">
       <Skeleton class="h-6 w-full" />
       <Skeleton class="h-6 w-full" />
       <Skeleton class="h-6 w-3/4" />

projects/app/src/pages/projects/[id]/[containerId]/stats.vue

@@ -22,7 +22,7 @@ usePolling(refresh, { interval: 5000 });
 
 <template>
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 py-4 mt-4 w-full">
-    <template v-if="status === 'pending'">
+    <template v-if="status === 'pending' && !data">
       <Skeleton class="h-24 w-full" />
       <Skeleton class="h-24 w-full" />
       <Skeleton class="h-24 w-full" />

projects/app/src/pages/sources.vue

@@ -55,7 +55,7 @@ function showContextMenu(source: Source) {
 <template>
   <div class="pt-[63px] w-full">
     <List>
-      <template v-if="status !== 'pending'">
+      <template v-if="status !== 'pending' || data?.length">
         <ListItem
           v-for="source of sources"
           :key="source?.id"
@@ -74,7 +74,7 @@ function showContextMenu(source: Source) {
         </ListItem>
       </template>
       <template v-else>
-        <ListItem v-for="i of [1, 2]" :key="i" :pending="status === 'pending'" />
+        <ListItem v-for="i of [1, 2]" :key="i" :pending="true" />
       </template>
     </List>
   </div>