Magento 2 custom admin grid keeps loading and never finishes

Question

I added a custom admin grid, but it keeps loading and loading and it never ends. The table has just like 50 rows

Here is an image

Also here is my ui_component, I feel that something is wrong here, can someone help me to find out what is causing this problem?

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <!--Declare data source, columns list, button...-->
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">clientespotenciales_grid.storeowner_data_source</item>
            <item name="deps" xsi:type="string">clientespotenciales_grid.storeowner_data_source</item>
            <!--Declare the data source name which will be defined below-->
        </item>
        <item name="spinner" xsi:type="string">clientespotenciales_columns</item>
        <!--Declare the listing of columns which will be defined below-->
        <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 Blog</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
            <!--The button on the top of the Grid-->
        </item>
    </argument>
    <dataSource name="storeowner_data_source">
        <!--The 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">storeowner_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">blog_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">blog_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>
    <!-- Controllers BEGIN-->

    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>
    </container>

    <bookmark name="bookmarks">
    <argument name="data" xsi:type="array">
         <item name="config" xsi:type="array">
             <item name="storageConfig" xsi:type="array">
                 <item name="namespace" xsi:type="string">clientespotenciales_grid</item>
             </item>
          </item>
     </argument>
 </bookmark>
 <component name="columns_controls">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="columnsData" xsi:type="array">
                <item name="provider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns</item>
            </item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
            <item name="displayArea" xsi:type="string">dataGridActions</item>
        </item>
    </argument>
</component>
<filterSearch name="fulltext">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="provider" xsi:type="string">clientespotenciales_grid.storeowner_data_source</item>
            <item name="chipsProvider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.listing_top.listing_filters_chips</item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.search</item>
            </item>
        </item>
    </argument>
</filterSearch>
<filters name="listing_filters">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="columnsProvider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns</item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.filters</item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="provider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.listing_top.listing_filters</item>
                <item name="imports" xsi:type="array">
                    <item name="visible" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns.${ $.index }:visible</item>
                </item>
            </item>
        </item>
    </argument>
</filters>
<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="selectProvider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns.ids</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
            <item name="indexField" xsi:type="string">entity_id</item>
        </item>
    </argument>
    <action name="delete">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="type" xsi:type="string">delete</item>
                <item name="label" xsi:type="string" translate="true">Delete</item>
                <item name="url" xsi:type="url" path="*/*/massDelete"/>
                <item name="confirm" xsi:type="array">
                    <item name="title" xsi:type="string" translate="true">Delete items</item>
                    <item name="message" xsi:type="string" translate="true">Are you sure to delete selected blogs?</item>
                </item>
            </item>
        </argument>
    </action>
</massaction>
<paging name="listing_paging">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.paging</item>
            </item>
            <item name="selectProvider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns.ids</item>
        </item>
    </argument>
</paging>
<exportButton name="export_button">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="selectProvider" xsi:type="string">clientespotenciales_grid.clientespotenciales_grid.store_owner_columns.ids</item>
        </item>
    </argument>
</exportButton>
<!--Controller end-->

    <columns name="store_owner_columns">
        <!--The list of columns-->
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">ID</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="store_owner_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <column name="customer_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Name</item>
                </item>
            </argument>
        </column>
        <column name="business">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Negocio</item>
                </item>
            </argument>
        </column>
        <column name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                </item>
            </argument>
        </column>
         
    </columns>

    
</listing>

Thanks and greeting!

Answer 1

You named your columns "store_owner_columns"

<columns name="store_owner_columns"> <<<< here is the name
        <!--The list of columns-->
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">

but your spinner waits for "clientespotenciales_columns"

<item name="spinner" xsi:type="string">clientespotenciales_columns</item> <<<< here

Rename one of them and your spinner should work.

You can find an example here:

https://devdocs.magento.com/guides/v2.4/extension-dev-guide/admin-grid.html