Magento 2 : Custom grid keeps spinning and grid doesn't load

Question

I have created a grid using the UI component. When I go to the grid the loader keeps spinning endlessly and the grid doesn't show. I have attached screen shot and code below

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="vendor_form_grid_listing_data_source" xsi:type="string">Vendor\Form\Model\ResourceModel\Form\Collection</item>
            </argument>
        </arguments>
    </type>
    <virtualType name="Vendor\Form\Model\ResourceModel\Form\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">vendor_product_info</argument>
            <argument name="resourceModel" xsi:type="string">Vendor\Form\Model\ResourceModel\Form</argument>
        </arguments>
    </virtualType>
</config>

grid_grid_listing.xml - UI component

<?xml version="1.0"?>
<!---{router_id}_{controller_name}_listing-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">vendor_form_grid_listing.vendor_form_grid_listing_data_source</item>
            <item name="deps" xsi:type="string">vendor_form_grid_listing.vendor_form_grid_listing_data_source</item>
        </item>
        <!--<item name="spinner" xsi:type="string">spinner_columns</item>-->
        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Add New Post</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="vendor_form_grid_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">vendor_form_grid_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">product_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                    <item name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">product_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>
    <columns name="spinner_columns">
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">55</item>
                    <item name="indexField" xsi:type="string">product_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="product_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <column name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Name</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Answer 1

I solved the problem. The issue was in the format of defining of items in ui component file

<item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">grid_grid_listing.vendor_form_grid_listing_data_source</item>
        <!-- the format here is uicomponentname.datasourcename -->
        <item name="deps" xsi:type="string">grid_grid_listing.vendor_form_grid_listing_data_source</item>
        <!-- the format here is uicomponentname.datasourcename -->
    </item>

Answer 2

vendor_form_grid_listing.vendor_form_grid_listing_data_source

the file name and provider is different.