@vaadin/component-base 24.4.0-alpha1 → 24.4.0-dev.b3e1d14600

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.4.0-alpha1",
+  "version": "24.4.0-dev.b3e1d14600",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "3e2ed41c99d618ff7def2734fd863c21c85775a3"
+  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
 }

package/src/data-provider-controller/cache.js

@@ -16,13 +16,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items.
-   *
-   * @type {number}
-   */
-  size = 0;
-
   /**
    * The number of items to display per page.
    *
@@ -58,6 +51,14 @@ export class Cache {
    */
   __subCacheByIndex = {};
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  __size = 0;
+
   /**
    * The total number of items, including items from expanded sub-caches.
    *
@@ -136,6 +137,46 @@ export class Cache {
     return this.flatSize;
   }
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  get size() {
+    return this.__size;
+  }
+
+  /**
+   * Sets the number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  set size(size) {
+    const oldSize = this.__size;
+    if (oldSize === size) {
+      return;
+    }
+
+    this.__size = size;
+
+    if (this.context.placeholder !== undefined) {
+      this.items.length = size;
+      for (let i = 0; i < size; i++) {
+        // eslint-disable-next-line logical-assignment-operators
+        this.items[i] = this.items[i] || this.context.placeholder;
+      }
+    }
+
+    Object.keys(this.pendingRequests).forEach((page) => {
+      const startIndex = parseInt(page) * this.pageSize;
+      if (startIndex >= this.size) {
+        delete this.pendingRequests[page];
+      }
+    });
+  }
+
   /**
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
@@ -160,7 +201,10 @@ export class Cache {
   setPage(page, items) {
     const startIndex = page * this.pageSize;
     items.forEach((item, i) => {
-      this.items[startIndex + i] = item;
+      const itemIndex = startIndex + i;
+      if (itemIndex < this.size) {
+        this.items[itemIndex] = item;
+      }
     });
   }
 

package/src/data-provider-controller/data-provider-controller.js

@@ -65,12 +65,27 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  constructor(host, { size, pageSize, isExpanded, getItemId, dataProvider, dataProviderParams }) {
+  /**
+   * Indicates whether any data has been loaded since the last cache clear.
+   *
+   * @type {boolean}
+   */
+  hasData = false;
+
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   *
+   * @type {undefined | object}
+   */
+  placeholder;
+
+  constructor(host, { size, pageSize, isExpanded, getItemId, placeholder, dataProvider, dataProviderParams }) {
     super();
     this.host = host;
     this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
+    this.placeholder = placeholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
     this.rootCache = this.__createRootCache(size);
@@ -87,6 +102,7 @@ export class DataProviderController extends EventTarget {
   get __cacheContext() {
     return {
       isExpanded: this.isExpanded,
+      placeholder: this.placeholder,
       // The controller instance is needed to ensure deprecated cache methods work.
       __controller: this,
     };
@@ -133,6 +149,7 @@ export class DataProviderController extends EventTarget {
    */
   clearCache() {
     this.rootCache = this.__createRootCache(this.rootCache.size);
+    this.hasData = false;
   }
 
   /**
@@ -187,7 +204,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (!item) {
+    if (this.__isPlaceholder(item)) {
       this.__loadCachePage(cache, page);
     }
   }
@@ -202,7 +219,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexHierarchy(flatIndex) {
     const { cache, item, index } = this.getFlatIndexContext(flatIndex);
 
-    if (item && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (!this.__isPlaceholder(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
       this.__loadCachePage(subCache, 0);
     }
@@ -251,6 +268,8 @@ export class DataProviderController extends EventTarget {
 
       this.recalculateFlatSize();
 
+      this.hasData = true;
+
       this.dispatchEvent(new CustomEvent('page-received'));
 
       delete cache.pendingRequests[page];
@@ -264,4 +283,9 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
+
+  /** @private */
+  __isPlaceholder(item) {
+    return item === this.placeholder;
+  }
 }