amélioration fluidité + ajout en cache des différentes pages pour chargement plus rapide

frontend/src/views/ContainersView.vue

@@ -127,8 +127,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onActivated, onBeforeUnmount } from 'vue'
 import api from '../api'
+import { useApiCache } from '../composables/useApiCache'
+
+const { fetchWithCache, invalidateCache } = useApiCache()
 
 const containers = ref([])
 const dockerStatus = ref({ connected: false })
@@ -137,12 +140,20 @@ const actionLoading = ref(false)
 const showAll = ref(true)
 const notification = ref({ show: false, message: '', type: 'success' })
 
-const fetchContainers = async () => {
+let refreshInterval = null
+
+const fetchContainers = async (forceRefresh = false) => {
   loading.value = true
   try {
-    const response = await api.get('/docker/containers', {
-      params: { all: showAll.value }
-    })
+    const response = await fetchWithCache(
+      '/docker/containers',
+      () => api.get('/docker/containers', { params: { all: showAll.value } }),
+      { 
+        ttl: 5000, // Cache de 5 secondes
+        forceRefresh,
+        params: { all: showAll.value }
+      }
+    )
     containers.value = response.data
   } catch (error) {
     showNotification('Erreur lors du chargement des conteneurs', 'error')
@@ -154,7 +165,11 @@ const fetchContainers = async () => {
 
 const checkDockerStatus = async () => {
   try {
-    const response = await api.get('/docker/status')
+    const response = await fetchWithCache(
+      '/docker/status',
+      () => api.get('/docker/status'),
+      { ttl: 10000 } // Cache de 10 secondes
+    )
     dockerStatus.value = response.data
   } catch (error) {
     console.error('Erreur statut Docker:', error)
@@ -180,7 +195,10 @@ const actionContainer = async (containerId, action) => {
     }
     
     showNotification(`Conteneur ${action}é avec succès`, 'success')
-    await fetchContainers()
+    
+    // Invalider le cache et rafraîchir
+    invalidateCache('/docker/containers')
+    await fetchContainers(true)
   } catch (error) {
     showNotification(`Erreur lors du ${action} du conteneur`, 'error')
     console.error(error)
@@ -191,7 +209,8 @@ const actionContainer = async (containerId, action) => {
 
 const toggleShowAll = () => {
   showAll.value = !showAll.value
-  fetchContainers()
+  invalidateCache('/docker/containers')
+  fetchContainers(true)
 }
 
 const getStatusBadgeClass = (state) => {
@@ -208,8 +227,34 @@ const showNotification = (message, type = 'success') => {
   }, 3000)
 }
 
+// Auto-refresh toutes les 10 secondes quand le composant est actif
+const startAutoRefresh = () => {
+  refreshInterval = setInterval(() => {
+    fetchContainers()
+  }, 10000)
+}
+
+const stopAutoRefresh = () => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+}
+
 onMounted(() => {
   checkDockerStatus()
   fetchContainers()
+  startAutoRefresh()
+})
+
+// Appelé quand le composant est réactivé depuis keep-alive
+onActivated(() => {
+  fetchContainers()
+  startAutoRefresh()
+})
+
+// Nettoyage
+onBeforeUnmount(() => {
+  stopAutoRefresh()
 })
 </script>