Magento 2 Custom Grid spinner loading does’t stop and grid data doesn’t display.

Magento admin grid with custom module loader display infinite and doesn’t stop in the grid page also none of the error display in the console.

This is a common error in module development and it’s a silly mistake to resolve the issue.

Recently I have faced this type of error on the admin panel with my custom module, On the Module grid page, the spinner loads infinitely without any grid display on the listing page.

I have just checked my custom module and found out the way to resolution.

I have a naming issue with the di.xml file collection argument value and the dataProvider name in the listing UI component file. Both names are mismatched and that keeps the loading infinitely.

In the di.xml file,
I have mentioned the grid virtual type,

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="rbj_banner_listing_data_source" xsi:type="string">BannerGridCollection</item>
            </argument>
        </arguments>
    </type>
    <virtualType name="BannerGridCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">Rbj_Banner</argument>
            <argument name="resourceModel" xsi:type="string">Rbj\Banner\Model\ResourceModel\Grid</argument>
        </arguments>
    </virtualType>
</config>

Here rbj_banner_listing_data_source is the grid dataSource name.

Now You must have to create an XML file that contains the UI part of the module on the grid, which will keep the name the same as the above keyword without data_source.

You have to create a UI Component file name will be, rbj_banner_listing.xml file under the path, app/code/<Packagename>/<modulename>/view/adminhtml/ui_component/

In the Ui Component XML file, You need to declare your data provider value will be the same,

You have to pass the item provider value be rbj_banner_listing.rbj_banner_listing_data_source

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">rbj_banner_listing.rbj_banner_listing_data_source</item>
    </item>
</argument>

<spinner /> tag  <deps> argument will be the same(rbj_banner_listing_data_source) in the settings node section.

<settings>
    <spinner>rbj_banner_columns</spinner>
    <deps>
    <dep>rbj_banner_listing.rbj_banner_listing_data_source</dep>
    </deps>
</settings>

Also, Check your dataSource Node in the XML file,

<dataSource component="Magento_Ui/js/grid/provider" name="rbj_banner_listing_data_source">
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="rbj_banner_listing_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
</dataSource>

In the above XML code snippet, the name attribute for the <dataProvider> node must match the rbj_banner_listing_data_source