TileGrid reload clientOnly DataSource

[Hirn]

I have an application where the TileGrid and clientOnly DataSource components are used.
When the application starts, everything is loaded and displayed correctly.
But if I try to install new data in the DataSource using setCacheData, then the data is reloaded and the application freezes.
The documentation for clientOnly DataSource says that data should be downloaded only once when the data is accessed for the first time.

I suspect that I forgot to set the parameters for Tile Grid, but I do not know which ones.
Version SNAPSHOT_v13.1d_2024-03-07 (2024-03-07)

Below is my application code
App.js

import React, { Component } from 'react';
import 'smartclient-lgpl/release';
import { DataSource, DSField, TileGrid, DVField } from 'smartclient-lgpl/react';
class App extends Component {
  static typesMap = {
    "jpg": "pic",
    "png": "pic",
    "mp3": "sound",
    "mp4": "video",
    "doc": "doc",
    "xls": "table"
  };
  constructor(param) {
    super(param);
    this.selectedDocument = {};
  }
  transformDocuments(dsResponse, dsRequest, data) {
    let addDocument = {
      title: "add new document"
    };
    data.push(addDocument);
    dsResponse.data = data;
  }
  pictureFormatter(value, record, rowNum, colNum, grid) {
    let url = record.url;
    if (url != null) {
      let i = url.lastIndexOf(".") + 1;
      let n = url.lastIndexOf("?");
      if (n === -1) n = url.length;
      let ext = url.substring(i, n);
      let file = App.typesMap[ext];
      if (!file) {
        file = "doc"
      }
      return file + ".png";
    }
    return "add.png";
  }
  onDocumentClick(viewer, tile, record) {
    let irecord = viewer.getRecordIndex(record);
    if ((irecord + 1) === viewer.tiles.length) {
      let ds = viewer.getDataSource();
      let documents = ds.cacheData;
      let addDocument = documents.pop();
      documents.push({
        title: "new document",
        url: "www.aaa.com/newsound.mp3"
      });
      documents.push(addDocument);
      ds.setCacheData(documents);
    }
  }
  render() {
    return (
      <>
        <DataSource ID="documentsDS" clientOnly="true" dataURL="./api/documents.json"
          transformResponse={this.transformDocuments}
        >
          <fields>
            <DSField name="id" type="sequence" primaryKey="true" />
            <DSField name="picture" type="image" imageURLPrefix="../media/" />
            <DSField name="title" type="text" />
            <DSField name="url" type="text" />
          </fields>
        </DataSource>
        <TileGrid ID="documentsGrid" dataSource="documentsDS" autoFetchData="true"
          width="100%" height="100%" tileWidth="194" tileHeight="200"
          tileProperties={{ redrawOnStateChange: false }} detailViewerProperties={{ rowHeight: 18 }}
          recordClick={this.onDocumentClick.bind(this)}
        >
          <fields>
            <DVField name="picture" imageWidth="120" imageHeight="120" cellStyle="DVField" formatCellValue={this.pictureFormatter.bind(this)} />
            <DVField name="title" />
            <DVField name="url" escapeHTML="false" />
          </fields>
        </TileGrid>
      </>
    );
  }
}
export default App;

documents.json

[
  {
    "title": "First document",
    "url": "manage/documents/api/get/items/downloadprojectfile.php?project=evo3_p0001",
    "isFile": "true"
  },
  {
    "title": "Second document",
    "url": "http://www.aaa.de/url2.png",
    "isFile": "false"
  }
]

Screen by start application

Screen after "add new document" click

[Isomorphic]

We're looking into the issue causing the "Loading data..." message in the TileGrid to never clear, but trying to call setCacheData() on the DataSource is probably not the right approach here. You should instead just call DS.addData() to add a new record rather than directly tinkering with the cache. If you want your special "add new document" tile to always be last, you can accomplish that with a sort normalizer:

onDocumentClick(viewer, tile, record) {
    if (record.title == "add new document") {
      let ds = viewer.getDataSource();
      ds.addData({
        title: "new document",
        url: "www.aaa.com/newsound.mp3"
      });
      if (!viewer.sortSetup) {
        viewer.setSort([{
          property:"id",
          direction:"ascending",
          normalizer:function(item) {
            if (item.title == "add new document") return Infinity;
            return item.id;
          }
        }]);
        viewer.sortSetup = true;
      }
    }
  }

Or better yet, you could have a dedicated button in your GUI add a new document. That would avoid the need to control placement of a special "add new document" tile.

By the way, this issue isn't specific to our React support - it would be present even if you had coded your sample entirely in JavaScript.

[Hirn]

Thank you for the answer and the proposed solution to my problem. It's just a salvation for me.

[Hirn]

Is there any news on fixing the infinite download bug? This error began to manifest itself in my case when creating TileGrid. If you need a working example, I can prepare it.

[Isomorphic]

Firstly, check in the browser console for errors or warnings - for example, if your server returned a bad response, directly calling data.push() in transformDocuments() could crash.

If there are no errors or warnings, or they don't make the issue clear, then yes, please provide a runnable sample that shows the problem.

1) it should use addData() rather than setCacheData() when adding records
2) any required data or files should be included or commented out