Loader not visible on remote data load/filter/sort

[rajenatidan]

Hi,

I tried the remote data load example as given in the docs. I copied the whole example, the only change being the data source to my local system. The data loads fine and everything works as expected. I see a horizontal loading line in the example page on top of table and also on bottom border of the table.

But I can't see any loading line on data loading/filtering/sorting in my local project page even though I have copied the exact code and installed mui dependencies as required.

My project was created with CRA.
Using React version 18.2,
mui version 5.14,
emotion-react version 11.11.1,
emotion-styled version 11.11.0,
material-react-table version 2.0.4

I can't understand what am I missing.

Code:

import { Box, Button } from "@mui/material";
import { EditNoteOutlined, ListAlt, ListAltSharp, Update } from "@mui/icons-material";
import { DataGrid } from '@mui/x-data-grid';
import {
    MaterialReactTable,
    useMaterialReactTable,
  } from 'material-react-table';

import { useEffect, useMemo, useState } from "react";
import { apiGetRequest, apiPostRequest } from '../../../common/httpRequests'
import { Link } from "react-router-dom";
import DayJsProvider from "../../../common/localizationProvider";

export default function List(props){

    const userId = props.userId;
    const [data, setData] = useState([]);

  const [isError, setIsError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isRefetching, setIsRefetching] = useState(false);
  const [rowCount, setRowCount] = useState(0);

  //table state
  const [columnFilters, setColumnFilters] = useState([]);
  const [globalFilter, setGlobalFilter] = useState('');
  const [sorting, setSorting] = useState([]);
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });
  const columns = useMemo(() =>[
      { accessorKey: 'applicationNumber', header: "Application Number"},
      { accessorKey:'firstName', header: 'First Name' },
      { accessorKey:'lastName', header: 'Last Name' },
      { accessorKey:'dob', header: 'Birthdate', filterVariant:'date' },
      { accessorKey:'formTypeId', header: 'Form Type'},
      { accessorKey:'statusId', header: 'Status'},
    ],[]);

const fetchData = () => {
      if (!data.length) {
        setIsLoading(true);
      } else {
        setIsRefetching(true);
      }
      
      if(columnFilters.length > 0){
      var filter =columnFilters.map(col =>        
          ({
            columnName: col.id,
            value: col.value
          })
        )
      }
      console.log("Filter object to post", filter);
      console.log("Sorting object ", sorting);
      let postObject = {
        userId: 3,
        filters: filter,
        startPage : `${pagination.pageIndex * pagination.pageSize}`,
        pageSize: `${pagination.pageSize}`
      }
      try {
        apiPostRequest("Applicant/GetAllApplications", postObject).then((response) => {
          console.log("Application List response",response.data);
          setData(response.data.record);
          setRowCount(response.data.record.length);
        }).catch((error) => console.log("Error", error));
        
      } catch (error) {
        setIsError(true);
        console.error(error);
        return;
      }

      setIsError(false);
      setIsLoading(false);
      setIsRefetching(false);
    };

useEffect(() =>{
        console.log("Column Filters", columnFilters);
        fetchData();
      },[columnFilters,
        globalFilter,
        pagination.pageIndex,
        pagination.pageSize,
        sorting,
      ]);

    const table = useMaterialReactTable({
    columns,
    data,
    initialState: { density: 'compact' },
    enableRowSelection: false,
    muiTableBodyProps:{size:'small'},
    defaultColumn:{
        size:80,
        minSize:50,
        maxSize:100
    },
    getRowId: (row) => row.applicationNumber,
    initialState: { showColumnFilters: true },
    manualFiltering: true,
    manualPagination: true,
    manualSorting: true,
    muiToolbarAlertBannerProps: isError
      ? {
          color: 'error',
          children: 'Error loading data',
        }
      : undefined,
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    rowCount,
    state: {
      columnFilters,
      globalFilter,
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isRefetching,
      sorting,
    }
  })

return(
        <>
        <DayJsProvider>
        <ListAltSharp />
        <Box >

            <MaterialReactTable table={table}  />
        </Box>
        

      
        </DayJsProvider>
        </>
    );

TIA.