feat: add lazy loading image component and skeleton for workflow cards

src/components/common/LazyImage.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="containerRef"
+    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+  >
+    <Skeleton
+      v-if="!isImageLoaded"
+      width="100%"
+      height="100%"
+      class="absolute inset-0"
+    />
+    <img
+      v-show="isImageLoaded"
+      ref="imageRef"
+      :src="cachedSrc"
+      :alt="alt"
+      draggable="false"
+      :class="imageClass"
+      :style="imageStyle"
+      @load="onImageLoad"
+      @error="onImageError"
+    />
+    <div
+      v-if="hasError"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+    >
+      <i class="pi pi-image text-2xl" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import { computed, ref, watch } from 'vue'
+
+import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
+import { useMediaCache } from '@/services/mediaCacheService'
+
+const {
+  src,
+  alt = '',
+  imageClass = '',
+  imageStyle,
+  rootMargin = '50px'
+} = defineProps<{
+  src: string
+  alt?: string
+  imageClass?: string | string[] | Record<string, boolean>
+  imageStyle?: Record<string, any>
+  rootMargin?: string
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
+const isIntersecting = ref(false)
+const isImageLoaded = ref(false)
+const hasError = ref(false)
+const cachedSrc = ref<string | undefined>(undefined)
+
+const { getCachedMedia } = useMediaCache()
+
+// Use intersection observer to detect when the image container comes into view
+useIntersectionObserver(
+  containerRef,
+  (entries) => {
+    const entry = entries[0]
+    if (entry?.isIntersecting) {
+      isIntersecting.value = true
+    }
+  },
+  {
+    rootMargin,
+    threshold: 0.1
+  }
+)
+
+// Only start loading the image when it's in view
+const shouldLoad = computed(() => isIntersecting.value)
+
+// Watch for when we should load and handle caching
+watch(
+  shouldLoad,
+  async (shouldLoad) => {
+    if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
+      try {
+        const cachedMedia = await getCachedMedia(src)
+        if (cachedMedia.error) {
+          hasError.value = true
+        } else if (cachedMedia.objectUrl) {
+          cachedSrc.value = cachedMedia.objectUrl
+        } else {
+          cachedSrc.value = src
+        }
+      } catch (error) {
+        console.warn('Failed to load cached media:', error)
+        // Fallback to original src
+        cachedSrc.value = src
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const onImageLoad = () => {
+  isImageLoaded.value = true
+  hasError.value = false
+}
+
+const onImageError = () => {
+  hasError.value = true
+  isImageLoaded.value = false
+}
+</script>

src/components/templates/TemplateWorkflowCardSkeleton.vue

@@ -0,0 +1,30 @@
+<template>
+  <Card
+    class="w-64 template-card rounded-2xl overflow-hidden shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
+    :pt="{
+      body: { class: 'p-0 h-full flex flex-col' }
+    }"
+  >
+    <template #header>
+      <div class="flex items-center justify-center">
+        <div class="relative overflow-hidden rounded-t-lg">
+          <Skeleton width="16rem" height="12rem" />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <div class="flex items-center px-4 py-3">
+        <div class="flex-1 flex flex-col">
+          <Skeleton width="80%" height="1.25rem" class="mb-2" />
+          <Skeleton width="100%" height="0.875rem" class="mb-1" />
+          <Skeleton width="90%" height="0.875rem" />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import Skeleton from 'primevue/skeleton'
+</script>

src/components/templates/TemplateWorkflowView.vue

@@ -1,24 +1,31 @@
 <template>
   <DataView
-    :value="templates"
+    :value="displayTemplates"
     :layout="layout"
     data-key="name"
     :lazy="true"
-    pt:root="h-full grid grid-rows-[auto_1fr]"
+    pt:root="h-full grid grid-rows-[auto_1fr_auto]"
     pt:content="p-2 overflow-auto"
   >
     <template #header>
-      <div class="flex justify-between items-center">
-        <h2 class="text-lg">{{ title }}</h2>
-        <SelectButton
-          v-model="layout"
-          :options="['grid', 'list']"
-          :allow-empty="false"
-        >
-          <template #option="{ option }">
-            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-          </template>
-        </SelectButton>
+      <div class="flex flex-col">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-lg">{{ title }}</h2>
+          <SelectButton
+            v-model="layout"
+            :options="['grid', 'list']"
+            :allow-empty="false"
+          >
+            <template #option="{ option }">
+              <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+            </template>
+          </SelectButton>
+        </div>
+        <TemplateSearchBar
+          v-model:search-query="searchQuery"
+          :filtered-count="filteredCount"
+          @clear-filters="() => reset()"
+        />
       </div>
     </template>
 
@@ -33,18 +40,35 @@
     </template>
 
     <template #grid="{ items }">
-      <div
-        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
-      >
-        <TemplateWorkflowCard
-          v-for="template in items"
-          :key="template.name"
-          :source-module="sourceModule"
-          :template="template"
-          :loading="loading === template.name"
-          :category-title="categoryTitle"
-          @load-workflow="onLoadWorkflow"
-        />
+      <div>
+        <div
+          class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
+        >
+          <TemplateWorkflowCard
+            v-for="template in items"
+            :key="template.name"
+            :source-module="sourceModule"
+            :template="template"
+            :loading="loading === template.name"
+            :category-title="categoryTitle"
+            @load-workflow="onLoadWorkflow"
+          />
+          <TemplateWorkflowCardSkeleton
+            v-for="n in shouldUsePagination && isLoadingMore
+              ? skeletonCount
+              : 0"
+            :key="`skeleton-${n}`"
+          />
+        </div>
+        <div
+          v-if="shouldUsePagination && hasMoreTemplates"
+          ref="loadTrigger"
+          class="w-full h-4 flex justify-center items-center"
+        >
+          <div v-if="isLoadingMore" class="text-sm text-muted">
+            {{ t('templateWorkflows.loadingMore') }}
+          </div>
+        </div>
       </div>
     </template>
   </DataView>
@@ -54,12 +78,21 @@
 import { useLocalStorage } from '@vueuse/core'
 import DataView from 'primevue/dataview'
 import SelectButton from 'primevue/selectbutton'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import TemplateSearchBar from '@/components/templates/TemplateSearchBar.vue'
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import TemplateWorkflowCardSkeleton from '@/components/templates/TemplateWorkflowCardSkeleton.vue'
 import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vue'
+import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
+import { useLazyPagination } from '@/composables/useLazyPagination'
+import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
 import type { TemplateInfo } from '@/types/workflowTemplateTypes'
 
-defineProps<{
+const { t } = useI18n()
+
+const { title, sourceModule, categoryTitle, loading, templates } = defineProps<{
   title: string
   sourceModule: string
   categoryTitle: string
@@ -72,6 +105,59 @@ const layout = useLocalStorage<'grid' | 'list'>(
   'grid'
 )
 
+const skeletonCount = 6
+const loadTrigger = ref<HTMLElement | null>(null)
+
+const templatesRef = computed(() => templates || [])
+
+const { searchQuery, filteredTemplates, filteredCount } =
+  useTemplateFiltering(templatesRef)
+
+// When searching, show all results immediately without pagination
+// When not searching, use lazy pagination
+const shouldUsePagination = computed(() => !searchQuery.value.trim())
+
+// Lazy pagination setup using filtered templates
+const {
+  paginatedItems: paginatedTemplates,
+  isLoading: isLoadingMore,
+  hasMoreItems: hasMoreTemplates,
+  loadNextPage,
+  reset
+} = useLazyPagination(filteredTemplates, {
+  itemsPerPage: 12
+})
+
+// Final templates to display
+const displayTemplates = computed(() => {
+  return shouldUsePagination.value
+    ? paginatedTemplates.value
+    : filteredTemplates.value
+})
+// Intersection observer for auto-loading (only when not searching)
+useIntersectionObserver(
+  loadTrigger,
+  (entries) => {
+    const entry = entries[0]
+    if (
+      entry?.isIntersecting &&
+      shouldUsePagination.value &&
+      hasMoreTemplates.value &&
+      !isLoadingMore.value
+    ) {
+      void loadNextPage()
+    }
+  },
+  {
+    rootMargin: '200px',
+    threshold: 0.1
+  }
+)
+
+watch([() => templates, searchQuery], () => {
+  reset()
+})
+
 const emit = defineEmits<{
   loadWorkflow: [name: string]
 }>()