fix(NavigationManager): optimize appendLazyItem perf

rdkcentral · Feb 19, 2024 · 5d1d1a8 · 5d1d1a8
1 parent a854f57
commit 5d1d1a8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js
@@ -26,7 +26,6 @@ import {
   getX,
   getY,
   isComponentOnScreen,
-  delayForAnimation,
   getShortestDistance
 } from '../../utils';
 
@@ -260,12 +259,11 @@ export default class FocusManager extends Base {
   }
 
   selectNext(forceSmoothValue) {
-    this.shouldSmooth = forceSmoothValue ?? true;
     if (this._lazyItems && this._lazyItems.length) {
-      delayForAnimation(() => {
-        this._appendLazyItem(this._lazyItems.splice(0, 1)[0]);
-      });
+      this._appendLazyItem(this._lazyItems.splice(0, 1)[0]);
     }
+    this.shouldSmooth = forceSmoothValue ?? true;
+
     const hasFocusable = !!(this.items || []).filter(i => !i.skipFocus).length;
     if (
       (this.selectedIndex === this.Items.children.length - 1 &&

diff --git a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js
@@ -308,8 +308,8 @@ export default class NavigationManager extends FocusManager {
   // can be overwritten
   _performRender() {}
 
-  _appendItem(item) {
-    this.shouldSmooth = false;
+  _appendItem(item, shouldStopSmooth = true) {
+    this.shouldSmooth = !shouldStopSmooth;
     item.parentFocus = this.hasFocus();
     item = this.Items.childList.a(item);
 
@@ -322,12 +322,23 @@ export default class NavigationManager extends FocusManager {
     }
 
     item = this._withAfterUpdate(item);
+    return item;
   }
 
   _appendLazyItem(item) {
-    this._appendItem(item);
-    this.queueRequestUpdate();
-    this._refocus();
+    const { lengthDimension, axis } = this._directionPropNames;
+    const lastChild = this._Items.children[this.items.length - 1];
+    const nextPosition =
+      lastChild[lengthDimension] +
+      lastChild[axis] +
+      (lastChild.extraItemSpacing || 0) +
+      this.style.itemSpacing;
+
+    const appended = this._appendItem(item, false);
+
+    // Update w/o recalculating  whole layout
+    appended[axis] = nextPosition;
+    this._Items[lengthDimension] += nextPosition + item[lengthDimension];
   }
 
   $itemChanged() {