feat(filters): add auto-refresh functionality to user filters and improve loading state handling

Author: x0sina

dashboard/src/components/users/filters.tsx

@@ -77,47 +77,49 @@ interface FiltersProps {
   }
   onFilterChange: (filters: Partial<FiltersProps['filters']>) => void
   refetch?: (options?: RefetchOptions) => Promise<unknown>
+  autoRefetch?: (options?: RefetchOptions) => Promise<unknown>
   advanceSearchOnOpen: (status: boolean) => void
   onClearAdvanceSearch?: () => void
   handleSort?: (column: string, fromDropdown?: boolean) => void
 }
 
-export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen, onClearAdvanceSearch, handleSort }: FiltersProps) => {
+export const Filters = ({ filters, onFilterChange, refetch, autoRefetch, advanceSearchOnOpen, onClearAdvanceSearch, handleSort }: FiltersProps) => {
   const { t } = useTranslation()
   const dir = useDirDetection()
   const [search, setSearch] = useState(filters.search || '')
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [autoRefreshInterval, setAutoRefreshInterval] = useState<number>(() => getUsersAutoRefreshIntervalSeconds())
   const { refetch: queryRefetch } = useGetUsers(filters)
-  const refetchUsers = useCallback(async (showLoading = false) => {
+  const refetchUsers = useCallback(async (showLoading = false, isAutoRefresh = false) => {
     if (showLoading) {
       setIsRefreshing(true)
     }
     try {
-      const refetchFn = refetch ?? queryRefetch
+      // Use autoRefetch for auto refresh, otherwise use manual refetch
+      const refetchFn = isAutoRefresh ? (autoRefetch ?? queryRefetch) : (refetch ?? queryRefetch)
       await refetchFn()
     } finally {
       if (showLoading) {
         setIsRefreshing(false)
       }
     }
-  }, [refetch, queryRefetch])
+  }, [refetch, autoRefetch, queryRefetch])
   useEffect(() => {
     const persistedValue = getUsersAutoRefreshIntervalSeconds()
     setAutoRefreshInterval(prev => (prev === persistedValue ? prev : persistedValue))
   }, [])
   useEffect(() => {
     if (!autoRefreshInterval) return
     const intervalId = setInterval(() => {
-      refetchUsers(true) // Show loading spinner on auto refresh
+      refetchUsers(true, true) // Show loading spinner on auto refresh, mark as auto refresh
     }, autoRefreshInterval * 1000)
     return () => clearInterval(intervalId)
   }, [autoRefreshInterval, refetchUsers])
   useEffect(() => {
     if (typeof document === 'undefined') return
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible' && autoRefreshInterval > 0) {
-        refetchUsers(true) // Show loading spinner on visibility change refresh
+        refetchUsers(true, true) // Show loading spinner on visibility change refresh, mark as auto refresh
       }
     }
     document.addEventListener('visibilitychange', handleVisibilityChange)
@@ -174,7 +176,7 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
 
   // Handle refresh with loading state
   const handleRefreshClick = async () => {
-    await refetchUsers(true) // Show loading spinner on manual refresh
+    await refetchUsers(true, false) // Show loading spinner on manual refresh, mark as manual refresh
   }
 
   const handleAutoRefreshChange = (seconds: number) => {

dashboard/src/components/users/users-table.tsx

@@ -26,6 +26,7 @@ const UsersTable = memo(() => {
   const [isAdvanceSearchOpen, setIsAdvanceSearchOpen] = useState(false)
   const [isSorting, setIsSorting] = useState(false)
   const isFirstLoadRef = useRef(true)
+  const isAutoRefreshingRef = useRef(false)
   const { admin } = useAdmin()
   const isSudo = admin?.is_sudo || false
 
@@ -152,6 +153,13 @@ const UsersTable = memo(() => {
     }
   }, [usersData])
 
+  // Reset auto refresh flag when fetching completes
+  useEffect(() => {
+    if (!isFetching && isAutoRefreshingRef.current) {
+      isAutoRefreshingRef.current = false
+    }
+  }, [isFetching])
+
   // Remove automatic refetch on filter change to prevent lag
   // Filters will trigger new queries automatically
 
@@ -257,12 +265,23 @@ const UsersTable = memo(() => {
   }, [])
 
   const handleManualRefresh = async () => {
+    // Mark as manual refresh (not auto refresh)
+    isAutoRefreshingRef.current = false
     // Invalidate queries to ensure fresh data
     queryClient.invalidateQueries({ queryKey: ['getUsers'] })
     // Then refetch
     return refetch()
   }
 
+  const handleAutoRefresh = async () => {
+    // Mark as auto refresh
+    isAutoRefreshingRef.current = true
+    // Invalidate queries to ensure fresh data
+    queryClient.invalidateQueries({ queryKey: ['getUsers'] })
+    // Then refetch - flag will be reset by useEffect when isFetching becomes false
+    return refetch()
+  }
+
   const handlePageChange = (newPage: number) => {
     if (newPage === currentPage || isChangingPage) return
 
@@ -331,6 +350,7 @@ const UsersTable = memo(() => {
         onFilterChange={handleFilterChange}
         advanceSearchOnOpen={setIsAdvanceSearchOpen}
         refetch={handleManualRefresh}
+        autoRefetch={handleAutoRefresh}
         handleSort={handleSort}
         onClearAdvanceSearch={() => {
           advanceSearchForm.reset({
@@ -350,7 +370,7 @@ const UsersTable = memo(() => {
           setCurrentPage(0)
         }}
       />
-      <DataTable columns={columns} data={usersData?.users || []} isLoading={showLoadingSpinner} isFetching={isFetching && !isFirstLoadRef.current} onEdit={handleEdit} />
+      <DataTable columns={columns} data={usersData?.users || []} isLoading={showLoadingSpinner} isFetching={isFetching && !isFirstLoadRef.current && !isAutoRefreshingRef.current} onEdit={handleEdit} />
       <PaginationControls
         currentPage={currentPage}
         totalPages={totalPages}