[DO NOT MERGE] NFT Grid Performance Changes

[Prithpal-Sooriya]

Description

We had some issues surrounding the NFT grid on Android.

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 2984.727294921875, "dt": 24841, "prevDt": 1225}

java.lang.RuntimeException: Canvas: trying to draw too large(1435879448bytes) bitmap.
android.graphics.RecordingCanvas.throwIfCannotDraw(RecordingCanvas.java:266)
android.graphics.BaseRecordingCanvas.drawBitmap(BaseRecordingCanvas.java:75)
com.horcrux.svg.SvgView.onDraw(SvgView.java:133)
android.view.View.draw(View.java:24842)
android.view.View.updateDisplayListIfDirty(View.java:23692)
android.view.View.draw(View.java:24573)

java.lang.OutOfMemoryError
android.graphics.Bitmap.nativeCreate(Native Method)
android.graphics.Bitmap.createBitmap(Bitmap.java:1229)
android.graphics.Bitmap.createBitmap(Bitmap.java:1186)
android.graphics.Bitmap.createBitmap(Bitmap.java:1134)
android.graphics.Bitmap.createBitmap(Bitmap.java:1093)
com.horcrux.svg.SvgView.drawOutput(SvgView.java:266)
com.horcrux.svg.SvgView.onDraw(SvgView.java:130)
android.view.View.draw(View.java:24842)

This fix should help alleviate some of these issues.

1. Refactored some props to prevent unnecessary re-renders
2. Removed the useSvgUriViewBox as this made an expensive call to fetch an SVG. Instead rely on the existing Image.getSize for dimensions.

• The useSvgUriViewBox never had any bounding which caused it to render large viewboxes.

There are other things we can do (throttling renders, flashlist) but lets see if we can get the list scrolling without crashing first.

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: d65ad55
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/97070df2-fc81-42aa-9a01-3288c581d7fe

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[Prithpal-Sooriya]

Some images do not have a size, and collapse to 0. This ensures that we at least give the container a size, so the image can fill it.

[Prithpal-Sooriya]

Double check this I don't think it is necessary.

[Prithpal-Sooriya]

I tried to keep the interface similar-ish to RemoteImage.
Honestly that interface is a mess, so I am open to updating this interface to make it a little cleaner and easier to understand.

[Prithpal-Sooriya]

These containers act similar to the conditionals in RemoteImage, but just keeps the conditionals contained here.

Gives us a cleaner return JSX output.