Grid is not loading showing just the spinner without errors in logs or console

Question

I'm trying to follow the guide https://developer.adobe.com/commerce/php/development/components/add-admin-grid/ to add a custom admin grid however I'm stuck in a situation where there's no error and the spinner keeps loading forever without loading the grid.

enter image description here

Log files system.log, debug.log, exception.log are empty

Javascript console only shows this clean of errors screen

enter image description here

Finally I can see from mui/index/render XHR request that data is fetched and in proper format

enter image description here

Here's my files

<?xml version="1.0"?>
<!--
file: app/code/Ioweb/GiftCards/etc/di.xml
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 <virtualType name="IowebGiftCardCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
 <arguments>
 <argument name="mainTable" xsi:type="string">salesrule_coupon_giftcard_order</argument>
 <argument name="resourceModel" xsi:type="string">Ioweb\GiftCards\Model\ResourceModel\GiftCardSummary</argument>
 </arguments>
 </virtualType>
 <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
 <arguments>
 <argument name="collections" xsi:type="array">
 <item name="ioweb_gift_cards_listing_data_source" xsi:type="string">IowebGiftCardCollection</item>
 </argument>
 </arguments>
 </type>
</config>

My listing component

<?xml version="1.0"?>
<!--
 * file: app/code/Ioweb/GiftCards/view/adminhtml/ui_component/giftcardsummary_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">ioweb_gift_cards_listing.ioweb_gift_cards_listing_data_source</item>
 <item name="deps" xsi:type="string">ioweb_gift_cards_listing.ioweb_gift_cards_listing_data_source</item>
 </item>
 <item name="spinner" xsi:type="string">gift_cards_columns</item>
 </argument>
 <settings>
 <spinner>gift_cards_columns</spinner>
 <deps>
 <dep>ioweb_gift_cards_listing.ioweb_gift_cards_listing_data_source</dep>
 </deps>
 </settings>
 <dataSource name="ioweb_gift_cards_listing_data_source" component="Magento_Ui/js/grid/provider">
 <settings>
 <storageConfig>
 <param name="indexField" xsi:type="string">id</param>
 </storageConfig>
 <updateUrl path="mui/index/render"/>
 </settings>
 <aclResource>Ioweb_GiftCards::management</aclResource>
 <dataProvider class="Ioweb\GiftCards\Ui\DataProvider\GiftCardsDataProvider" name="ioweb_gift_cards_listing_data_source">
 <settings>
 <requestFieldName>id</requestFieldName>
 <primaryFieldName>id</primaryFieldName>
 </settings>
 </dataProvider>
 </dataSource>
 <listingToolbar name="listing_top">
 <bookmark name="bookmarks"/>
 <columnsControls name="columns_controls"/>
 <!-- <filterSearch name="fulltext"/>-->
 <filters name="listing_filters"/>
 <paging name="listing_paging"/>
 </listingToolbar>
 <columns name="gift_cards_columns">
 <column name="id">
 <settings>
 <filter>text</filter>
 <label translate="true">ID</label>
 </settings>
 </column>
 </columns>
</listing>

My DataProvider

<?php
namespace Ioweb\GiftCards\Ui\DataProvider;
use Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider;
class GiftCardsDataProvider extends DataProvider
{
}

The model

<?php
namespace Ioweb\GiftCards\Model;
use Magento\Framework\Model\AbstractModel;
class GiftCardSummary extends AbstractModel
{
 /**
 * @inheritdoc
 */
 protected function _construct()
 {
 $this->_init(\Ioweb\GiftCards\Model\ResourceModel\GiftCardSummary::class);
 }
}

The ResourceModel

<?php
namespace Ioweb\GiftCards\Model\ResourceModel;
class GiftCardSummary extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
 /**
 * Main table name
 */
 const MAIN_TABLE_NAME = 'salesrule_coupon_giftcard_order';
 /**
 * @inheritdoc
 */
 protected function _construct()
 {
 $this->_init(self::MAIN_TABLE_NAME, 'id');
 }
}

The collection

<?php
namespace Ioweb\GiftCards\Model\ResourceModel\GiftCardSummary;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
class Collection extends AbstractCollection
{
 /**
 * @var string
 */
 protected $_idFieldName = 'id';
 protected function _construct()
 {
 $this->_init(
 \Ioweb\GiftCards\Model\GiftCardSummary::class,
 \Ioweb\GiftCards\Model\ResourceModel\GiftCardSummary::class
 );
 }
}

I don't see something obviously wrong with the declarations, any ideas why it doesn't render the grid?

Answer 1

Please Add below Code to listing file

 <?xml version="1.0"?>
<!--
 * file: app/code/Ioweb/GiftCards/view/adminhtml/ui_component/giftcardsummary_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">giftcardsummary_listing.giftcardsummary_listing_data_source</item>
 <item name="deps" xsi:type="string">giftcardsummary_listing.giftcardsummary_listing_data_source</item>
 </item>
 </argument>
 <settings>
 <spinner>gift_cards_columns</spinner>
 <deps>
 <dep>giftcardsummary_listing.giftcardsummary_listing_data_source</dep>
 </deps>
 </settings>
 <dataSource name="giftcardsummary_listing_data_source" component="Magento_Ui/js/grid/provider">
 <settings>
 <storageConfig>
 <param name="indexField" xsi:type="string">id</param>
 </storageConfig>
 <updateUrl path="mui/index/render"/>
 </settings>
 <aclResource>Ioweb_GiftCards::management</aclResource>
 <dataProvider class="Ioweb\GiftCards\Ui\DataProvider\GiftCardsDataProvider" name="giftcardsummary_listing_data_source">
 <settings>
 <requestFieldName>id</requestFieldName>
 <primaryFieldName>id</primaryFieldName>
 </settings>
 </dataProvider>
 </dataSource>
 <listingToolbar name="listing_top">
 <bookmark name="bookmarks"/>
 <columnsControls name="columns_controls"/>
 <!-- <filterSearch name="fulltext"/>-->
 <filters name="listing_filters"/>
 <paging name="listing_paging"/>
 </listingToolbar>
 <columns name="gift_cards_columns">
 <column name="id">
 <settings>
 <filter>text</filter>
 <label translate="true">ID</label>
 </settings>
 </column>
 </columns>
</listing>

Let me know if any Query..