fix: show loading banner when blockaid toggled

[blackdevelopa]

Description

When ppom is initialised on mobile, we notice that some devices experiences performance issues within the first couple seconds. Having this loading banner helps improve this experience for these devices.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1769

Manual testing steps

1. Go to Settings
2. Go to the Experimental
3. Toggle blockaid on

Screenshots/Recordings

Before

After

Screen.Recording.2023-12-06.at.17.29.27.mov

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

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.

[codecov-commenter]

Codecov Report

Attention: 35 lines in your changes are missing coverage. Please review.

Comparison is base (46c1cea) 37.09% compared to head (a648e1a) 37.06%.
Report is 1 commits behind head on main.

Files	Patch %	Lines
...alSettings/BlockaidIndicator/BlockaidIndicator.tsx	3.70%	26 Missing ⚠️
...ents/Views/Settings/ExperimentalSettings/index.tsx	33.33%	4 Missing ⚠️
app/actions/experimental/index.ts	0.00%	1 Missing ⚠️
...omponents/BottomSheets/BottomSheet/BottomSheet.tsx	0.00%	1 Missing ⚠️
...ings/BlockaidIndicator/BlockaidIndicator.styles.ts	50.00%	1 Missing ⚠️
app/core/Engine.ts	0.00%	1 Missing ⚠️
app/reducers/experimentalSettings/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8013      +/-   ##
==========================================
- Coverage   37.09%   37.06%   -0.04%     
==========================================
  Files        1131     1135       +4     
  Lines       29118    29150      +32     
  Branches     2722     2728       +6     
==========================================
+ Hits        10801    10803       +2     
- Misses      17694    17724      +30     
  Partials      623      623              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/9be52cdf-5e79-4f40-ab60-541fd1821600
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

[segun]

Left a few comments

[brianacnguyen]

Approved changes to DS

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

11.1% Coverage
0.0% Duplication