How would i show loader/shimmer in the intial load of grid ?

[Ch Cv]

Currently in my grid componetn for some reason for split seconds 'No records to display' then the loader is shown rather than showing the loader/shimmer from the start. How would i solve it 

  const fetchData= async (

    filters = appliedFilters,

    isRefresh = false

  ) => {

    if (gridRef.current && gridRef.current.showMaskRow) {

      gridRef.current.showMaskRow();

    }

    try {

      if (!isRefresh) {

        setLoading(true);

      }

      const responseJson = await getData(

        filters,

        { page: pagination.page, size: pagination.size },

        sortState

      );

      setData({

        result: responseJson.content,

        count: responseJson.page.total_elements,

      });

      gridRef.current.dataSource = {

        result: responseJson.content,

        count: responseJson.page.total_elements,

      };

    } catch (error) {

      gridRef.current.dataSource = {

        result: [],

        count: 0,

      };

      const errorMessage = getErrorMessage(error);

      if (error.message === "Network Error" || error.status === 500)

        return showToast("Alert!", `${errorMessage}`, "e-error");

      showToast("Error!", `${errorMessage}`, "e-warning");

    } finally {

      if (!isRefresh) {

        setLoading(false);

      }

    }

  };

  const onGridCreated = () => {

    if (gridRef.current) {

      gridRef.current.showMaskRow();

    }

    fetchSettlementFee().finally(() => {

      isInitialLoad.current = false;

    });

  };

  useEffect(() => {

    if (isInitialLoad.current) {

      return;

    }

    fetchData();

  }, [pagination.page, pagination.size, sortState]);

  useEffect(() => {

    if (gridRef.current && data.result) {

      gridRef.current.dataSource = data;

    }

  }, [data]);

 <GridComponent

          ref={gridRef}

          className="custom-content-scroll-dark"

          id="gridcomp"

          created={onGridCreated}

          allowPaging={true}

          pageSettings={{

            pageSize: pagination.size,

            pageSizes: true,

            pageCount: pagination.totalPages || 1,

            currentPage: pagination.page,

            totalRecordsCount: pagination.totalElements,

          }}

          actionComplete={onActionComplete}

          dataStateChange={handlePageChange}

          allowSorting={true}

          allowFiltering={false}

          allowExcelExport={true}

          toolbar={toolbarOptions}

          allowPdfExport={true}

          toolbarClick={toolbarClick}

          contextMenuOpen={contextMenuOpen}

          contextMenuItems={contextMenuItems}

          contextMenuClick={handleContextMenuClick}

          dataBound={dataBound}

          loadingIndicator={loadingIndicator}

          height={"100%"}

        >

[Kishore Muthukrishnan]

Hi ,

Greetings from Syncfusion Support,

We understand that you want to display a shimmer effect before the data is loaded the Grid component. To achieve this, use the dataBound event to conditionally invoke the showMaskRow() method. This will display the shimmer effect till the data is bound to the grid, and it will automatically be removed once the data is bound. Please refer to the below code snippet and sample for more information.

let initialRender = true;

const dataBound = () => {

        if (initialRender) {

            gridRef.current.showMaskRow();

            initialRender = false;

        }

    }

Sample : https://stackblitz.com/edit/react-9zcfto2c?file=index.js

Please get back to us if you need further assistance

Regards,

Kishore Muthukrishnan

[Ch Cv]

Thanks , 
This solved my problem but then i came accross another after usign this trick .

The grid table shrink for some time during the shimmer period if i use this mechansim i want no change in side the grid like it should stay same size . I think grid content shrinks for somreason. By shrink i mean that the height of the grid componnet dissapears only the header and the pagination part remaing with the grid content taking very minimal height

[Kishore Muthukrishnan]

Hi ,

When you set the grid’s height to 100%, its height is determined by the content. If no records are loaded yet, the shimmer effect will only appear within the empty record area. To display the shimmer with a fixed height regardless of content, set a static height for the grid. Please refer to the below code snippet and sample for more information.

<GridComponent ref={gridRef} dataBound={dataBound} allowSorting={true} allowFiltering={true} height={'400'} filterSettings={filterSettings} loadingIndicator = {loadingIndicator}>

Sample : https://stackblitz.com/edit/react-9zcfto2c-3omrfhgl?file=index.js,index.html
 

Regards,

Kishore Muthukrishnan