fix: loading phrases in record browser

Author: bartekmp

frontend/src/features/admin/components/AdminPanel/useAdminApi.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { API_ENDPOINTS } from '../../../../shared/constants/constants';
 import { useDebouncedApiCall } from '../../../../hooks/useDebounce';
 
@@ -9,9 +9,10 @@ let cacheTimestamp = null;
 const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setError, setToken, setIsLogged }) {
-    const authHeader = token
+    // Memoize so all downstream useCallbacks only recreate when token actually changes
+    const authHeader = useMemo(() => token
         ? { Authorization: 'Bearer ' + token, 'Content-Type': 'application/json' }
-        : {};
+        : {}, [token]);
 
     // Helper function to handle authentication errors
     const handleAuthError = useCallback((response) => {
@@ -33,7 +34,7 @@ export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setErr
         if (filterCategory) url += `&category=${encodeURIComponent(filterCategory)}`;
         if (searchTerm && searchTerm.trim()) url += `&search=${encodeURIComponent(searchTerm.trim())}`;
         if (languageSetId) url += `&language_set_id=${languageSetId}`;
-        
+
         const response = await fetch(url, { headers: authHeader });
         if (!response.ok) {
             if (handleAuthError(response)) {
@@ -47,20 +48,24 @@ export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setErr
         return response.json();
     }, [authHeader, handleAuthError]);
 
-    const { 
-        call: debouncedFetchRows, 
-        isLoading: isFetchingRows, 
-        showRateLimit: showFetchRateLimit 
+    // Stable callbacks — memoized so useDebouncedApiCall doesn't recreate on every render
+    const onFetchSuccess = useCallback((data) => {
+        setRows(data.rows || data);
+        setTotalRows(data.total || data.length || 0);
+        setError("");
+    }, [setRows, setTotalRows, setError]);
+
+    const onFetchError = useCallback((err) => {
+        setError(err.message);
+    }, [setError]);
+
+    const {
+        call: debouncedFetchRows,
+        isLoading: isFetchingRows,
+        showRateLimit: showFetchRateLimit
     } = useDebouncedApiCall(fetchRowsApiCall, 750, {
-        onSuccess: (data) => {
-            setRows(data.rows || data);
-            setTotalRows(data.total || data.length || 0);
-            setDashboard(false);
-            setError("");
-        },
-        onError: (err) => {
-            setError(err.message);
-        }
+        onSuccess: onFetchSuccess,
+        onError: onFetchError,
     });
 
     const fetchRows = useCallback((offset, limit, filterCategory, searchTerm, languageSetId) => {
@@ -234,7 +239,7 @@ export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setErr
             const response = await fetch(`${API_ENDPOINTS.ADMIN_BATCH_ADD_CATEGORY}?language_set_id=${languageSetId}`, {
                 method: 'POST',
                 headers: authHeader,
-                body: JSON.stringify({ 
+                body: JSON.stringify({
                     row_ids: rowIds,
                     category: category.trim()
                 })
@@ -270,7 +275,7 @@ export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setErr
             const response = await fetch(`${API_ENDPOINTS.ADMIN_BATCH_REMOVE_CATEGORY}?language_set_id=${languageSetId}`, {
                 method: 'POST',
                 headers: authHeader,
-                body: JSON.stringify({ 
+                body: JSON.stringify({
                     row_ids: rowIds,
                     category: category.trim()
                 })
@@ -312,13 +317,13 @@ export function useAdminApi({ token, setRows, setTotalRows, setDashboard, setErr
         return response.json();
     }, [authHeader, handleAuthError]);
 
-    return { 
-        fetchRows, 
-        handleLogin, 
-        handleSave, 
-        handleExportTxt, 
-        clearDb, 
-        handleDelete, 
+    return {
+        fetchRows,
+        handleLogin,
+        handleSave,
+        handleExportTxt,
+        clearDb,
+        handleDelete,
         fetchCategories,
         invalidateCategoriesCache,
         handleBatchDelete,

frontend/src/features/admin/components/BrowseRecords/BrowseRecordsContainer.jsx

@@ -34,7 +34,6 @@ export default function BrowseRecordsContainer({
     const [offsetInput, setOffsetInput] = useState(0);
     const [searchTerm, setSearchTerm] = useState('');
     const [filterCategory, setFilterCategory] = useState('');
-    const [loading, setLoading] = useState(false);
 
     // Row Editing State
     const [newRow, setNewRow] = useState(null);
@@ -52,15 +51,16 @@ export default function BrowseRecordsContainer({
 
     // API Hook
     const {
-        fetchRows: originalFetchRows,
+        fetchRows,
         handleSave,
         handleExportTxt,
         clearDb,
         handleDelete: deleteRowApi,
         handleBatchDelete,
         handleBatchAddCategory,
         handleBatchRemoveCategory,
-        invalidateCategoriesCache
+        invalidateCategoriesCache,
+        isFetchingRows,
     } = useAdminApi({
         token,
         setRows,
@@ -71,20 +71,6 @@ export default function BrowseRecordsContainer({
         setIsLogged
     });
 
-    // Wrap fetchRows to handle loading state
-    const fetchRows = useCallback((...args) => {
-        setLoading(true);
-        originalFetchRows(...args);
-    }, [originalFetchRows]);
-
-    // Clear loading state when rows change
-    useEffect(() => {
-        if (loading) {
-            const timer = setTimeout(() => setLoading(false), 100);
-            return () => clearTimeout(timer);
-        }
-    }, [rows, loading]);
-
     // Initial Fetch & Updates
     useEffect(() => {
         if (selectedLanguageSetId) {
@@ -303,7 +289,7 @@ export default function BrowseRecordsContainer({
         <BrowseRecordsView
             rows={rows}
             totalRows={totalRows}
-            loading={loading}
+            loading={isFetchingRows}
             error={error}
 
             offset={offset}

frontend/src/features/admin/components/BrowseRecords/BrowseRecordsView.jsx

@@ -16,7 +16,9 @@ import {
     useTheme,
     Snackbar,
     Alert,
-    IconButton
+    IconButton,
+    CircularProgress,
+    Fade,
 } from '@mui/material';
 import TranslateIcon from '@mui/icons-material/Translate';
 import CategoryIcon from '@mui/icons-material/Category';
@@ -343,28 +345,50 @@ const BrowseRecordsView = ({
                 )
             }
             {/* Data Table */}
-            <AdminTable
-                rows={rows}
-                onSaveRow={handleInlineSave}
-                onDeleteRow={handleInlineDelete}
-                totalRows={totalRows}
-                searchTerm={searchTerm}
-                onSearchChange={handleSearchChange}
-                isLoading={loading}
-                batchMode={batchMode}
-                selectedRows={selectedRows}
-                onRowSelectionChange={handleRowSelectionChange}
-                onBatchModeToggle={handleBatchModeToggle}
-                onAddNewRow={handleStartAddRow}
-                newRow={newRow}
-                onNewRowChange={handleNewRowFieldChange}
-                onCancelNewRow={handleCancelNewRow}
-                onConfirmNewRow={handleConfirmNewRow}
-                isSavingNewRow={isSavingNewRow}
-                canAddNewRow={canAddNewRow}
-                categoryOptions={categories}
-                compactMode={isLayoutCompact}
-            />
+            <Box sx={{ position: 'relative' }}>
+                <AdminTable
+                    rows={rows}
+                    onSaveRow={handleInlineSave}
+                    onDeleteRow={handleInlineDelete}
+                    totalRows={totalRows}
+                    searchTerm={searchTerm}
+                    onSearchChange={handleSearchChange}
+                    isLoading={loading}
+                    batchMode={batchMode}
+                    selectedRows={selectedRows}
+                    onRowSelectionChange={handleRowSelectionChange}
+                    onBatchModeToggle={handleBatchModeToggle}
+                    onAddNewRow={handleStartAddRow}
+                    newRow={newRow}
+                    onNewRowChange={handleNewRowFieldChange}
+                    onCancelNewRow={handleCancelNewRow}
+                    onConfirmNewRow={handleConfirmNewRow}
+                    isSavingNewRow={isSavingNewRow}
+                    canAddNewRow={canAddNewRow}
+                    categoryOptions={categories}
+                    compactMode={isLayoutCompact}
+                />
+                <Fade in={loading} unmountOnExit>
+                    <Box
+                        sx={{
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: (theme) =>
+                                theme.palette.mode === 'dark'
+                                    ? 'rgba(0, 0, 0, 0.45)'
+                                    : 'rgba(255, 255, 255, 0.65)',
+                            backdropFilter: 'blur(2px)',
+                            borderRadius: 1,
+                            zIndex: 10,
+                        }}
+                    >
+                        <CircularProgress size={48} />
+                    </Box>
+                </Fade>
+            </Box>
             {/* Pagination */}
             <Box sx={{ mt: 3 }}>
                 <PaginationControls

frontend/src/hooks/useDebounce.js

@@ -13,7 +13,7 @@ export const useDebounce = (callback, delay, deps = []) => {
 
     const debouncedFn = useCallback((...args) => {
         setIsDebouncing(true);
-        
+
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
@@ -75,36 +75,49 @@ export const useDebouncedApiCall = (apiCall, delay = 750, options = {}) => {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [showRateLimit, setShowRateLimit] = useState(false);
-    const { onSuccess, onError } = options;
+
+    // Use refs for callbacks and loading flag so they don't need to be in
+    // dependency arrays — prevents cascade re-creation on every state change
+    const isLoadingRef = useRef(false);
+    const onSuccessRef = useRef(options.onSuccess);
+    const onErrorRef = useRef(options.onError);
+    const apiCallRef = useRef(apiCall);
+
+    // Keep refs up-to-date without triggering re-renders
+    onSuccessRef.current = options.onSuccess;
+    onErrorRef.current = options.onError;
+    apiCallRef.current = apiCall;
 
     const debouncedCall = useCallback(async (...args) => {
-        if (isLoading) {
+        if (isLoadingRef.current) {
             setShowRateLimit(true);
             setTimeout(() => setShowRateLimit(false), 3000);
             return;
         }
 
+        isLoadingRef.current = true;
         setIsLoading(true);
         setError(null);
 
         try {
-            const result = await apiCall(...args);
-            if (onSuccess) onSuccess(result);
+            const result = await apiCallRef.current(...args);
+            if (onSuccessRef.current) onSuccessRef.current(result);
             return result;
         } catch (err) {
             setError(err);
             if (err.response?.status === 429) {
                 setShowRateLimit(true);
                 setTimeout(() => setShowRateLimit(false), 4000);
             }
-            if (onError) onError(err);
+            if (onErrorRef.current) onErrorRef.current(err);
             throw err;
         } finally {
+            isLoadingRef.current = false;
             setIsLoading(false);
         }
-    }, [apiCall, isLoading, onSuccess, onError]);
+    }, []); // stable — uses refs for all external values
 
-    const { debouncedFn: call } = useDebounce(debouncedCall, delay);
+    const { debouncedFn: call, isDebouncing } = useDebounce(debouncedCall, delay);
 
-    return { call, isLoading, error, showRateLimit };
+    return { call, isLoading: isLoading || isDebouncing, error, showRateLimit };
 };