Magento 2 Custom Module (Admin) Spinner never disappear

Question

I want to show list of records in my magento2 module. The data has successfully loaded, but the loading progressbar never disappear:

My ui_component file named:paymentconfirmations_paymentconfirmation_listing.xml:

<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">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing_data_source</item>
        <item name="deps" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">blog_post_columns</item>
</argument>
<dataSource name="paymentconfirmations_paymentconfirmation_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">PaymentConfirmationDataProvider</argument>
        <argument name="name" xsi:type="string">paymentconfirmations_paymentconfirmation_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>
<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>
    <bookmark name="bookmarks">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
                <item name="displayArea" xsi:type="string">dataGridActions</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/>
                    <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/>
                    <item name="namespace" xsi:type="string">paymentconfirmations_paymentconfirmation_listing</item>
                </item>
            </item>
        </argument>
    </bookmark>
    <container 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">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_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>
    </container>
    <filterSearch name="fulltext">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/search/search</item>
                <item name="displayArea" xsi:type="string">dataGridFilters</item>
                <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing_data_source</item>
                <item name="chipsProvider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.listing_filters_chips</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.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="displayArea" xsi:type="string">dataGridFilters</item>
                <item name="dataScope" xsi:type="string">filters</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.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">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
                    </item>
                </item>
            </item>
        </argument>
        <filterRange name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">id</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.listing_filters</item>
                    </item>
                </item>
            </argument>
            <filterInput name="from">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">from</item>
                        <item name="label" xsi:type="string" translate="true">from</item>
                        <item name="placeholder" xsi:type="string" translate="true">From</item>
                    </item>
                </argument>
            </filterInput>
            <filterInput name="to">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">to</item>
                        <item name="label" xsi:type="string" translate="true">to</item>
                        <item name="placeholder" xsi:type="string" translate="true">To</item>
                    </item>
                </argument>
            </filterInput>
        </filterRange>
        <filterInput name="order_number">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">order_number</item>
                    <item name="label" xsi:type="string" translate="true">Order Number</item>
                </item>
            </argument>
        </filterInput>
        <filterInput name="account_number">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">account_number</item>
                    <item name="label" xsi:type="string" translate="true">Account Number</item>
                </item>
            </argument>
        </filterInput>
        <filterInput name="account_holder">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">account_holder</item>
                    <item name="label" xsi:type="string" translate="true">Account Holder</item>
                </item>
            </argument>
        </filterInput>
        <filterRange name="transfer_date" class="Magento\Ui\Component\Filters\Type\DateRange">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">transfer_date</item>
                    <item name="label" xsi:type="string" translate="true">Transfer Date</item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.listing_filters</item>
                    </item>
                </item>
            </argument>
            <filterDate name="from">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">from</item>
                        <item name="label" xsi:type="string" translate="true">from</item>
                        <item name="placeholder" xsi:type="string" translate="true">From</item>
                        <item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
                    </item>
                </argument>
            </filterDate>
            <filterDate name="to">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">to</item>
                        <item name="label" xsi:type="string" translate="true">to</item>
                        <item name="placeholder" xsi:type="string" translate="true">To</item>
                        <item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
                    </item>
                </argument>
            </filterDate>
        </filterRange>
        <filterRange name="created_at" class="Magento\Ui\Component\Filters\Type\DateRange">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">created_at</item>
                    <item name="label" xsi:type="string" translate="true">Created</item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.listing_filters</item>
                    </item>
                </item>
            </argument>
            <filterDate name="from">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">from</item>
                        <item name="label" xsi:type="string" translate="true">from</item>
                        <item name="placeholder" xsi:type="string" translate="true">From</item>
                        <item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
                    </item>
                </argument>
            </filterDate>
            <filterDate name="to">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">to</item>
                        <item name="label" xsi:type="string" translate="true">to</item>
                        <item name="placeholder" xsi:type="string" translate="true">To</item>
                        <item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
                    </item>
                </argument>
            </filterDate>
        </filterRange>
        <filterSelect name="status">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">status</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="caption" xsi:type="string" translate="true">Select...</item>
                    <item name="options" xsi:type="array">
                        <item name="disable" xsi:type="array">
                            <item name="value" xsi:type="string">0</item>
                            <item name="label" xsi:type="string" translate="true">Disabled</item>
                        </item>
                        <item name="enable" xsi:type="array">
                            <item name="value" xsi:type="string">1</item>
                            <item name="label" xsi:type="string" translate="true">Published</item>
                        </item>
                    </item>
                </item>
            </argument>
        </filterSelect>
    </filters>
    <massaction name="listing_massaction">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_columns.ids</item>
                <item name="indexField" xsi:type="string">id</item>
            </item>
        </argument>
        <action name="disable">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="type" xsi:type="string">disable</item>
                    <item name="label" xsi:type="string" translate="true">Disable</item>
                    <item name="url" xsi:type="url" path="paymentconfirmations/paymentconfirmation/massDisable"/>
                </item>
            </argument>
        </action>
        <action name="enable">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="type" xsi:type="string">enable</item>
                    <item name="label" xsi:type="string" translate="true">Enable</item>
                    <item name="url" xsi:type="url" path="paymentconfirmations/paymentconfirmation/massEnable"/>
                </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">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_columns.ids</item>
                <item name="displayArea" xsi:type="string">bottom</item>
                <item name="options" xsi:type="array">
                    <item name="20" xsi:type="array">
                        <item name="value" xsi:type="number">20</item>
                        <item name="label" xsi:type="string" translate="true">20</item>
                    </item>
                    <item name="30" xsi:type="array">
                        <item name="value" xsi:type="number">30</item>
                        <item name="label" xsi:type="string" translate="true">30</item>
                    </item>
                    <item name="50" xsi:type="array">
                        <item name="value" xsi:type="number">50</item>
                        <item name="label" xsi:type="string" translate="true">50</item>
                    </item>
                    <item name="100" xsi:type="array">
                        <item name="value" xsi:type="number">100</item>
                        <item name="label" xsi:type="string" translate="true">100</item>
                    </item>
                    <item name="200" xsi:type="array">
                        <item name="value" xsi:type="number">200</item>
                        <item name="label" xsi:type="string" translate="true">200</item>
                    </item>
                </item>
            </item>
        </argument>
    </paging>
</container>
<columns name="paymentconfirmations_paymentconfirmation_columns">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_columns.actions</item>
                    <item name="target" xsi:type="string">applyAction</item>
                    <item name="params" xsi:type="array">
                        <item name="0" xsi:type="string">edit</item>
                        <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                    </item>
                </item>
                <item name="controlVisibility" xsi:type="boolean">true</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">paymentconfirmations_paymentconfirmation_listing.paymentconfirmations_paymentconfirmation_listing.listing_top.bookmarks</item>
                    <item name="root" xsi:type="string">columns.${ $.index }</item>
                    <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                </item>
            </item>
        </item>
    </argument>

    <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">id</item>
            </item>
        </argument>
    </selectionsColumn>

    <column name="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 name="index" xsi:type="number">10</item>
            </item>
        </argument>
    </column>
    <column name="order_number">
        <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">Order Number</item>
                <item name="index" xsi:type="number">20</item>
            </item>
        </argument>
    </column>
    <column name="account_number">
        <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">Account Number</item>
                <item name="index" xsi:type="number">30</item>
            </item>
        </argument>
    </column>
    <column name="account_holder">
        <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">Account Holder</item>
                <item name="index" xsi:type="number">40</item>
            </item>
        </argument>
    </column>
    <column name="transfer_date" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Transfer Date</item>
                <item name="index" xsi:type="number">50</item>
            </item>
        </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Created</item>
                <item name="index" xsi:type="number">60</item>
            </item>
        </argument>
    </column>
    <column name="status">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">RepublikFiksi\ConfirmPayment\Model\PaymentConfirmation\Source\IsActive</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="editor" xsi:type="string">select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Status</item>
                <item name="index" xsi:type="number">70</item>
            </item>
        </argument>
    </column>
    <actionsColumn name="actions" class="RepublikFiksi\ConfirmPayment\Ui\Component\Listing\Column\PaymentConfirmationActions">
        <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">107</item>
                <item name="indexField" xsi:type="string">id</item>
                <item name="index" xsi:type="number">80</item>
            </item>
        </argument>
    </actionsColumn>
</columns>
</listing>

My di.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="RepublikFiksi\ConfirmPayment\Api\Data\PaymentConfirmationInterface" type="RepublikFiksi\ConfirmPayment\Model\PaymentConfirmation" />
    <virtualType name="PaymentConfirmationFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
        <arguments>
            <argument name="appliers" xsi:type="array">
                <item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
                <item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
            </argument>
        </arguments>
    </virtualType>
    <virtualType name="PaymentConfirmationDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
        <arguments>
            <argument name="collection" xsi:type="object" shared="false">RepublikFiksi\ConfirmPayment\Model\ResourceModel\PaymentConfirmation\Collection</argument>
            <argument name="filterPool" xsi:type="object" shared="false">PaymentConfirmationFilterPool</argument>
        </arguments>
    </virtualType>
    <virtualType name="RepublikFiksi\ConfirmPayment\Model\ResourceModel\PaymentConfirmation\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">payment_confirmation</argument>
            <argument name="resourceModel" xsi:type="string">RepublikFiksi\ConfirmPayment\Model\ResourceModel\PaymentConfirmation</argument>
        </arguments>
    </virtualType>
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="paymentconfirmations_paymentconfirmation_listing_data_source" xsi:type="string">RepublikFiksi\ConfirmPayment\Model\ResourceModel\PaymentConfirmation\Collection</item>
            </argument>
        </arguments>
    </type>
</config>

Is there something wrong or something that I missed? Thanks!

Answer 1

It has been long but I had the same issue but I fixed the problem. The spinner checks reference point on columns object. Name fields should be same for both XML element. After the change below, it should work.

<item name="spinner" xsi:type="string">blog_post_columns</item>
....

<columns name="blog_post_columns">