fix(android): reduce the number of refresh calls a collectionview goes through on start

Author: farfromrefug

demo-snippets/vue3/install.ts

@@ -19,7 +19,6 @@ export function installPlugin(app: any) {
     app.use(SwipeMenuPlugin);
     install();
 }
-
 export const demos = [
     { name: 'Card', path: 'card', component: CardHome },
     { name: 'Simple Grid', path: 'simple-grid', component: SimpleGrid },

packages/collectionview/platforms/android/java/com/nativescript/collectionview/RecyclerView.java

@@ -58,7 +58,7 @@ protected void onMeasure(int widthMeasureSpec,
                 int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         if (sizeChangedListener != null) {
-            sizeChangedListener.onMeasure();
+            sizeChangedListener.onMeasure(widthMeasureSpec, heightMeasureSpec);
         }
     }
     @Override

packages/collectionview/platforms/android/java/com/nativescript/collectionview/SizeChangedListener.java

@@ -3,5 +3,5 @@
 public interface SizeChangedListener {
     // public void onSizeChanged(int w, int h, int oldw, int oldh);
     public void onLayout(boolean changed, int l, int t, int r, int b);
-    public void onMeasure();
+    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec);
 }

src/collectionview/index-common.ts

@@ -68,6 +68,7 @@ export namespace knownMultiTemplates {
 
 export interface Plugin {
     onLayout?: Function;
+    onMeasure?: Function;
 }
 
 function toDevicePixels(length: CoreTypes.PercentLengthType, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number {

src/collectionview/index.android.ts

@@ -277,7 +277,7 @@ export class CollectionView extends CollectionViewBase {
 
         nativeView.sizeChangedListener = new com.nativescript.collectionview.SizeChangedListener({
             onLayout:(changed, left, top, right, bottom) => changed && this.onLayout(left, top, right, bottom),
-            onMeasure: () => this.updateInnerSize()
+            onMeasure: (widthMeasureSpec, heightMeasureSpec) => this.onMeasure(widthMeasureSpec, heightMeasureSpec)
         });
         this.spanSize = this._getSpanSize;
 
@@ -289,9 +289,9 @@ export class CollectionView extends CollectionViewBase {
         // animator.setSupportsChangeAnimations(false);
 
         // nativeView.setItemAnimator(animator);
-        // (nativeView.getItemAnimator() ).setSupportsChangeAnimations(false);
 
-        this.refresh();
+        // enforce the first refresh for the collectionview to be ready as soon as possible
+        this.refresh(true);
     }
     @profile
     public disposeNativeView() {
@@ -739,7 +739,7 @@ export class CollectionView extends CollectionViewBase {
     updateSpanCount(requestLayout = true) {
         if (this.mInPropertiesSet) {
             this.mShouldUpdateSpanCount = true;
-            return;
+            return false;
         }
         this.mShouldUpdateSpanCount = false;
         const layoutManager = this.layoutManager;
@@ -767,6 +767,13 @@ export class CollectionView extends CollectionViewBase {
         if (result) {
             this.updateSpanCount();
         }
+        // there is no need to call refresh if it was triggered before with same size.
+        // this refresh is just to handle size change
+        const layoutKey = this._innerWidth + '_' + this._innerHeight;
+        if (this._isDataDirty || (this._lastLayoutKey && this._lastLayoutKey !== layoutKey)) {
+            // setTimeout(() => this.refresh(false), 0);
+        }
+        this._lastLayoutKey = layoutKey;
         return result;
     }
     @profile
@@ -791,13 +798,33 @@ export class CollectionView extends CollectionViewBase {
             const p = CollectionViewBase.plugins[k];
             p.onLayout && p.onLayout(this, left, top, right, bottom);
         });
-        // there is no need to call refresh if it was triggered before with same size.
-        // this refresh is just to handle size change
-        const layoutKey = this._innerWidth + '_' + this._innerHeight;
-        if (this._isDataDirty || (this._lastLayoutKey && this._lastLayoutKey !== layoutKey)) {
-            setTimeout(() => this.refresh(false), 0);
+        
+    }
+    @profile
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        const lastLayoutKey = this._lastLayoutKey
+        this.updateInnerSize();
+
+        if (lastLayoutKey !== this._lastLayoutKey) {
+            //we need to refresh visible cells so that they measure to the new size
+            // for some reason it gets animated even with setSupportsChangeAnimations(false)
+            // so we clear until it is done
+            const nativeView = this.nativeViewProtected;
+            const animator = nativeView.getItemAnimator()
+            nativeView.setItemAnimator(null);
+            this.refreshVisibleItems()
+            setTimeout(() => {
+                nativeView.setItemAnimator(animator);
+            }, 0);
         }
-        this._lastLayoutKey = layoutKey;
+        const p = CollectionViewBase.plugins[this.layoutStyle];
+        if (p && p.onMeasure) {
+            p.onMeasure(this, widthMeasureSpec,heightMeasureSpec);
+        }
+        this.plugins.forEach((k) => {
+            const p = CollectionViewBase.plugins[k];
+            p.onMeasure && p.onMeasure(this, widthMeasureSpec,heightMeasureSpec);
+        });
     }
     public onSourceCollectionChanged(event: ChangedData<any>) {
         if (!this._listViewAdapter || this._dataUpdatesSuspended) {
@@ -904,7 +931,7 @@ export class CollectionView extends CollectionViewBase {
 
     _layedOut = false;
     @profile
-    public refresh(updateSpanCountRequestsLayout = true) {
+    public refresh(forceRefresh = false, updateSpanCountRequestsLayout = false) {
         if (this.mInPropertiesSet) {
             this.mShouldRefresh = true;
             return;
@@ -916,10 +943,10 @@ export class CollectionView extends CollectionViewBase {
         }
         // seems like we refresh sooner
         // not sure why it was needed before and not now.
-        // if (!this.isLoaded || this._innerWidth === 0 || this._innerHeight === 0) {
-        //     this._isDataDirty = true;
-        //     return;
-        // }
+        if (!forceRefresh && (!this.isLoaded || !this.nativeView)) {
+            this._isDataDirty = true;
+            return;
+        }
         this._isDataDirty = false;
         this._lastLayoutKey = this._innerWidth + '_' + this._innerHeight;
         let adapter = this._listViewAdapter;

src/collectionview/typings/android.d.ts

@@ -49,9 +49,9 @@ declare namespace com {
                 smoothScrollToPosition(position: number, snapPosition?: number);
             }
             export class SizeChangedListener {
-                constructor(impl?: { onLayout(changed:boolean, l: number, t: number, r: number, b: number); onMeasure() });
+                constructor(impl?: { onLayout(changed:boolean, l: number, t: number, r: number, b: number); onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) });
                 onLayout(changed:boolean, l: number, t: number, r: number, b: number);
-                onMeasure();
+                onMeasure(widthMeasureSpec: number, heightMeasureSpec: number);
             }
             export class OnScrollListener extends androidx.recyclerview.widget.RecyclerView.OnScrollListener {
                 constructor(listener: OnScrollListener.Listener);