Mutate behaivor suddendly changed

[ulisescarreonalvarez]

Hi everyone,

So i was working on this app, and everything worked as expected.
At one moment in time i implemented a Table with a button for the refresh data from the API, that looks like this.

import { useMemo, useState } from 'react';
import { Button, Chip, Stack, Tooltip } from '@mui/material';
import IconButton from 'components/@extended/IconButton';
import { useGetLeadsActive } from 'api/leads';
import { MaterialReactTable, MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleFiltersButton } from 'material-react-table';
import { DeleteOutlined, EditOutlined, EyeOutlined, ReloadOutlined, CalendarOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router';
import { Link } from 'react-router-dom';

// ==============================|| INVOICE LIST ||============================== //
const ActiveLeadsTable = () => {
    const navigation = useNavigate();

    const { leadsActiveFilterLoading, leadsActiveFilter, refetchLeadsActive } = useGetLeadsActive();
    // Memoized columns
    const columns = useMemo(
        () => [
            {
                id: "ap100033041001933LocalizedInteger",
                accessorKey: 'ap100033041001933LocalizedInteger',
                header: 'Lead #',
                size: 150,
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "ap100033041001240LocalizedString",
                accessorKey: 'ap100033041001240LocalizedString',
                header: 'Sales Person',
                size: 200,
                Cell: ({ cell }) => (
                    cell.getValue() ?? '-'
                ),
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "ap100033041009724LocalizedString",
                accessorKey: 'ap100033041009724LocalizedString',
                header: 'Customer',
                size: 150,
                Cell: ({ cell }) => (
                    cell.getValue() ?? '-'
                ),
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                accessorKey: 'ap100033041009722LocalizedString',
                header: 'Phone Number',
                size: 150,
                Cell: ({ cell }) => (
                    cell.getValue() ?? '-'
                ),
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "ap100033041003000LocalizedDate",
                accessorKey: 'ap100033041003000LocalizedDate',
                header: 'Date entered',
                size: 150,
                Cell: ({ cell }) => {
                    const dateValue = cell.getValue();
                    return dateValue ? new Date(dateValue).toLocaleString('en-GB', {
                        day: '2-digit',
                        month: '2-digit',
                        year: 'numeric'
                    }) : '-';
                },
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "ap100033041002904MasterInteger",
                accessorKey: 'ap100033041002904MasterInteger',
                header: 'Quote #',
                size: 150,
                Cell: ({ cell }) => (
                    cell.getValue() ? <Link style={{ textDecoration: 'none' }}><Chip color="success" label={cell.getValue() ?? '-'} size="small" variant="combined"></Chip> </Link>: '-'
                ),
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "ap100033041001976MasterInteger",
                accessorKey: 'ap100033041001976MasterInteger',
                header: 'Sales #',
                size: 150,
                Cell: ({ cell }) => (
                    cell.getValue() ? <Link style={{ textDecoration: 'none' }}><Chip color="primary" label={cell.getValue() ?? '-'} size="small" variant="combined"></Chip> </Link>: '-'
                ),
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                id: "TimeLine",
                accessorKey: 'timeline',
                header: 'Timeline',
                size: 150,
                Cell: ({ cell, row }) => {
                    const rowOriginal = row.original;
                    if(rowOriginal.ap100033041003000LocalizedDate){
                        return <Chip color="primary" label={ new Date(rowOriginal.ap100033041003000LocalizedDate).toLocaleString('en-GB', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric'
                        }) ?? '-'} size="small" variant="combined"></Chip>
                    }
                },
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
            },
            {
                accessorKey: 'ap100033041001224MasterObjectId',
                header: 'Actions',
                meta: {
                    className: 'cell-center'
                },
                muiTableHeadCellProps: {
                    align: 'center',
                },
                muiTableBodyCellProps: {
                    align: 'center',
                },
                muiTableFooterCellProps: {
                    align: 'center',
                },
                disableSortBy: true,
                Cell: ({ cell, row }) => (
                    <Stack direction="row" alignItems="center" justifyContent="center" spacing={0}>
                        <Tooltip title="View">
                            <IconButton color="secondary" onClick={row.getToggleExpandedHandler()}>
                                <EyeOutlined />
                            </IconButton>
                        </Tooltip>
                        <Tooltip title="Edit">
                            <IconButton color="secondary"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    navigation(`/orders/leads/detail/${cell.getValue()}`);
                                }}
                            >
                                <EditOutlined />
                            </IconButton>
                        </Tooltip>
                        <Tooltip title="Delete">
                            <IconButton
                                value={cell.getValue()}
                                color="error"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    handleClose();
                                    setCustomerDeleteId(row.original.id);
                                }}
                            >
                                <DeleteOutlined />
                            </IconButton>
                        </Tooltip>
                    </Stack>
                )
            }
        ],
        [],
    );
    const [pagination, setPagination] = useState({
        pageIndex: 0,
        pageSize: 15, //customize the default page size
    });

    return <MaterialReactTable
        columns={columns}
        data={leadsActiveFilter}
        state={{ isLoading: leadsActiveFilterLoading, pagination }}
        onPaginationChange={setPagination}
        initialState={{ density: 'compact' }}
        enableStickyHeader
        enableRowPinning
        muiCircularProgressProps={{
            color: 'secondary',
            thickness: 5,
            size: 55,
        }}
        muiSkeletonProps={{
            animation: 'pulse',
            height: 28,
        }}
        renderToolbarInternalActions={({ table }) => (
            <>
                <IconButton onClick={() => refetchLeadsActive()}>
                    <ReloadOutlined />
                </IconButton>
                <MRT_ToggleGlobalFilterButton table={table} />
                <MRT_ToggleFiltersButton table={table} />
                <MRT_ShowHideColumnsButton table={table} />
            </>
        )}
    />
};

export default ActiveLeadsTable;

When i click the button the refetchLeadsActive is a function that mutates the key, isLoading parameter from SWR always was set with isLoading as true, so the Table will show a Spin Loading Icon, but suddenly now isLoading is always false, the only time that isLoading is true is when i manually refrtesh the page so the Request is made by the first time, im stuck because no error or warning is shown on my console.

Code of hook:

export function useGetLeadsActive() {

    const keyCache = `${endpoints.key}${endpoints['active']}/leads/active`;
    const url = endpoints.key + endpoints['active'];

    const { data, isLoading, error, isValidating } = useSWR(
        keyCache,
        () => fetcherPost([url, leadsStatus['active']], { company_id: Cookies.get('companySelected') }),
        {
            revalidateIfStale: false,
            revalidateOnFocus: false,
            revalidateOnReconnect: true            
        }
    );

    console.log("SWR LeadsActive Data:", data);
    console.log("SWR LeadsActive Loading:", isLoading);
    console.log("SWR LeadsActive Error:", error);
    console.log("SWR LeadsActive Validating:", isValidating);

    const refetchLeadsActive = async () => {
        //when i mutate isLoading is always false, but in the past is set to true 
        await mutate(keyCache);
    };

    return {
        leadsActiveFilter: data?.data?.items || [],
        leadsActiveFilterLoading: isLoading,
        leadsActiveFilterError: error,
        leadsActiveFilterValidating: isValidating,
        leadsActiveFilterEmpty: !isLoading && !data?.data?.items.length,
        hasleadsActiveFilter: !isLoading && data?.data?.items.length,
        refetchLeadsActive, // Expose the refetch function
    };
}

Any idea?