display files with cache image

mobile/hooks/useFiles.ts

@@ -2,14 +2,26 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '../api/client';
 import { ENDPOINTS } from '../constants/api';
 import { FileItem, PaginatedResponse } from '../types';
+import { metadataCache } from '../services/metadataCache';
 
 export function useFiles(page: number = 1, limit: number = 20) {
   return useQuery({
     queryKey: ['files', page, limit],
-    queryFn: () =>
-      apiClient.get<PaginatedResponse<FileItem>>(
+    queryFn: async () => {
+      const res = await apiClient.get<PaginatedResponse<FileItem>>(
         `${ENDPOINTS.FILES}?page=${page}&limit=${limit}&thumbnail=thumbnail`
-      ),
+      );
+      metadataCache.setFiles(res.data, res.meta.page, res.meta.total);
+      return res;
+    },
+    initialData: () => {
+      const cached = metadataCache.getFiles();
+      if (cached && cached.page === page) {
+        return { data: cached.files, meta: { page: cached.page, total: cached.total } };
+      }
+      return undefined;
+    },
+    staleTime: 30_000,
   });
 }
 
@@ -36,6 +48,7 @@ export function useDeleteFile() {
     mutationFn: (id: string) => apiClient.delete(`${ENDPOINTS.FILES}/${id}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['files'] });
+      metadataCache.clear();
     },
   });
 }
@@ -48,6 +61,7 @@ export function useAddTags() {
       apiClient.post(`${ENDPOINTS.FILES}/${fileId}/tags`, { tags, tag_type: tagType }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['files'] });
+      metadataCache.clear();
     },
   });
 }
@@ -60,6 +74,7 @@ export function useMoveFiles() {
       apiClient.post(ENDPOINTS.MOVE, { file_ids: fileIds, parent_file_id: parentFileId }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['files'] });
+      metadataCache.clear();
     },
   });
 }