Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Optimize ContactsView & MembersTabPanel settings pages #16979

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

caybro
Copy link
Member

@caybro caybro commented Dec 18, 2024

Tip

Best review commit by commit; the first 2 contain UI components updates. Also, a lot of the new stuff is Storybook pages :)

What does the PR do

  • removed nested ListViews inside StackLayouts, in order to reduce the memory footprint and improve performance, and also to be able to better manage the scrolling
  • no more unrolled multiple listviews, which again hurt the performance; now the views instantiate the delegates dynamically on the fly
  • the tab bar and the search fields now stick to the top of the page, with the users list view scrolling independently
  • both views now uniformly use the common ContactListItemDelegate
  • the received/sent CRs are now combined into one pendingContacts model
  • factored out common search/filter criteria into a new, separate SFPM UserFilterContainer component
  • fix an issue where StatusContactVerificationIcons wasn't properly displaying the "blocked" state/icon
  • fix documentation comments, removed relative imports, and updated some
  • separate commits for Status Controls UI updates & fixes

Fixes #16612
Fixes #16958

Affected areas

Settings/Contacts; Community/Settings/Members

Architecture compliance

Screenshot of functionality (including design for comparison)

  • I've checked the design and this PR matches it

Contacts:
image

Community members:
image

image

image

image

image

@caybro caybro linked an issue Dec 18, 2024 that may be closed by this pull request
@status-im-auto
Copy link
Member

status-im-auto commented Dec 18, 2024

Jenkins Builds

Click to see older builds (62)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 6e4620a #1 2024-12-18 19:57:47 ~6 min macos/aarch64 🍎dmg
✔️ 6e4620a #1 2024-12-18 19:59:17 ~8 min tests/nim 📄log
✔️ 6e4620a #1 2024-12-18 20:02:50 ~11 min tests/ui 📄log
✔️ dd6550f #4 2024-12-18 20:13:38 ~4 min macos/aarch64 🍎dmg
✔️ dd6550f #4 2024-12-18 20:16:40 ~7 min tests/nim 📄log
✔️ dd6550f #4 2024-12-18 20:20:13 ~11 min tests/ui 📄log
✔️ dd6550f #4 2024-12-18 20:25:09 ~16 min macos/x86_64 🍎dmg
✔️ dd6550f #4 2024-12-18 20:28:01 ~18 min linux-nix/x86_64 📦tgz
✔️ dd6550f #4 2024-12-18 20:30:30 ~21 min windows/x86_64 💿exe
✔️ dd6550f #4 2024-12-18 20:31:51 ~22 min linux/x86_64 📦tgz
✔️ 7a700b7 #5 2024-12-19 11:32:43 ~4 min macos/aarch64 🍎dmg
✔️ 7a700b7 #5 2024-12-19 11:35:51 ~7 min tests/nim 📄log
✔️ 7a700b7 #5 2024-12-19 11:39:13 ~11 min tests/ui 📄log
✔️ 7a700b7 #5 2024-12-19 11:40:57 ~12 min macos/x86_64 🍎dmg
✔️ 7a700b7 #5 2024-12-19 11:44:48 ~16 min linux-nix/x86_64 📦tgz
✔️ 7a700b7 #5 2024-12-19 11:48:52 ~20 min windows/x86_64 💿exe
✔️ 7a700b7 #5 2024-12-19 11:50:44 ~22 min linux/x86_64 📦tgz
✔️ 285991f #6 2024-12-19 16:31:00 ~4 min macos/aarch64 🍎dmg
✔️ 285991f #6 2024-12-19 16:33:59 ~7 min tests/nim 📄log
✔️ 285991f #6 2024-12-19 16:37:26 ~11 min tests/ui 📄log
✔️ 285991f #6 2024-12-19 16:40:12 ~13 min macos/x86_64 🍎dmg
✔️ 285991f #6 2024-12-19 16:42:19 ~16 min linux-nix/x86_64 📦tgz
✔️ 285991f #6 2024-12-19 16:45:50 ~19 min windows/x86_64 💿exe
✔️ 285991f #6 2024-12-19 16:46:53 ~20 min linux/x86_64 📦tgz
✔️ 03f9af4 #7 2024-12-19 16:53:03 ~5 min macos/aarch64 🍎dmg
✔️ 03f9af4 #7 2024-12-19 16:55:33 ~7 min tests/nim 📄log
03f9af4 #7 2024-12-19 16:59:17 ~11 min tests/ui 📄log
✔️ 03f9af4 #7 2024-12-19 17:02:24 ~14 min macos/x86_64 🍎dmg
✔️ 03f9af4 #7 2024-12-19 17:04:18 ~16 min linux-nix/x86_64 📦tgz
✔️ 03f9af4 #7 2024-12-19 17:07:02 ~19 min windows/x86_64 💿exe
✔️ 03f9af4 #7 2024-12-19 17:09:08 ~21 min linux/x86_64 📦tgz
✔️ 03f9af4 #8 2024-12-19 23:13:12 ~11 min tests/ui 📄log
✔️ 55747bf #8 2024-12-19 23:32:05 ~4 min macos/aarch64 🍎dmg
✔️ 55747bf #8 2024-12-19 23:34:43 ~7 min tests/nim 📄log
✔️ 55747bf #9 2024-12-19 23:39:33 ~12 min tests/ui 📄log
✔️ 55747bf #8 2024-12-19 23:40:48 ~13 min macos/x86_64 🍎dmg
✔️ 55747bf #8 2024-12-19 23:45:20 ~18 min linux-nix/x86_64 📦tgz
✔️ 55747bf #8 2024-12-19 23:46:47 ~19 min windows/x86_64 💿exe
✔️ 55747bf #8 2024-12-19 23:48:47 ~21 min linux/x86_64 📦tgz
✔️ 2052cd3 #9 2024-12-20 10:55:37 ~5 min macos/aarch64 🍎dmg
✔️ 2052cd3 #9 2024-12-20 10:57:27 ~7 min tests/nim 📄log
✔️ 2052cd3 #10 2024-12-20 11:01:34 ~11 min tests/ui 📄log
✔️ 2052cd3 #9 2024-12-20 11:04:57 ~15 min linux-nix/x86_64 📦tgz
✔️ 2052cd3 #9 2024-12-20 11:05:07 ~15 min macos/x86_64 🍎dmg
✔️ 2052cd3 #9 2024-12-20 11:07:52 ~17 min linux/x86_64 📦tgz
✔️ 2052cd3 #9 2024-12-20 11:08:51 ~18 min windows/x86_64 💿exe
✔️ 77975e9 #10 2024-12-20 12:32:51 ~5 min macos/aarch64 🍎dmg
✔️ 77975e9 #10 2024-12-20 12:35:23 ~7 min tests/nim 📄log
✔️ 77975e9 #11 2024-12-20 12:38:41 ~11 min tests/ui 📄log
✔️ 77975e9 #10 2024-12-20 12:40:44 ~13 min macos/x86_64 🍎dmg
✔️ 77975e9 #10 2024-12-20 12:43:25 ~15 min linux-nix/x86_64 📦tgz
✔️ 77975e9 #10 2024-12-20 12:45:38 ~18 min linux/x86_64 📦tgz
✔️ 77975e9 #10 2024-12-20 12:46:40 ~18 min windows/x86_64 💿exe
✔️ fe50257 #11 2024-12-20 16:08:46 ~4 min macos/aarch64 🍎dmg
✔️ fe50257 #11 2024-12-20 16:11:55 ~7 min tests/nim 📄log
fe50257 #12 2024-12-20 16:15:22 ~11 min tests/ui 📄log
✔️ fe50257 #11 2024-12-20 16:18:20 ~14 min macos/x86_64 🍎dmg
✔️ fe50257 #11 2024-12-20 16:21:39 ~17 min linux-nix/x86_64 📦tgz
✔️ fe50257 #11 2024-12-20 16:22:37 ~18 min windows/x86_64 💿exe
✔️ fe50257 #11 2024-12-20 16:26:19 ~22 min linux/x86_64 📦tgz
fe50257 #13 2024-12-20 16:48:55 ~11 min tests/ui 📄log
✔️ fe50257 #14 2024-12-20 17:56:44 ~12 min tests/ui 📄log
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 6c476aa #12 2024-12-20 19:30:27 ~4 min macos/aarch64 🍎dmg
✔️ 6c476aa #12 2024-12-20 19:33:22 ~7 min tests/nim 📄log
✔️ 6c476aa #15 2024-12-20 19:37:57 ~12 min tests/ui 📄log
✔️ 6c476aa #12 2024-12-20 19:40:19 ~14 min macos/x86_64 🍎dmg
✔️ 6c476aa #12 2024-12-20 19:43:53 ~18 min windows/x86_64 💿exe
✔️ 6c476aa #12 2024-12-20 19:44:11 ~18 min linux-nix/x86_64 📦tgz
✔️ 6c476aa #12 2024-12-20 19:46:37 ~20 min linux/x86_64 📦tgz
✔️ 3393297 #13 2024-12-23 13:30:58 ~4 min macos/aarch64 🍎dmg
✔️ 3393297 #13 2024-12-23 13:33:58 ~7 min tests/nim 📄log
✔️ 3393297 #16 2024-12-23 13:37:49 ~11 min tests/ui 📄log
✔️ 3393297 #13 2024-12-23 13:43:18 ~17 min linux-nix/x86_64 📦tgz
✔️ 3393297 #13 2024-12-23 13:46:12 ~19 min windows/x86_64 💿exe
✔️ 3393297 #13 2024-12-23 13:46:30 ~20 min macos/x86_64 🍎dmg
✔️ 3393297 #13 2024-12-23 13:48:57 ~22 min linux/x86_64 📦tgz

@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch 2 times, most recently from d0e8549 to dd6550f Compare December 18, 2024 20:08
@caybro caybro changed the title 16612 settings optimize contactsview settings page fix: Optimize ContactsView & MembersTabPanel settings pages Dec 19, 2024
@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch from dd6550f to 7a700b7 Compare December 19, 2024 11:27
- fixup margins and padding according to latest Figma designs
- make a difference between a disabled and inactive tab by using opacity
- provide smooth color transitions
- add a dedicated StoryBook page
@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch 2 times, most recently from 285991f to 03f9af4 Compare December 19, 2024 16:47
@caybro caybro marked this pull request as ready for review December 19, 2024 16:47
@caybro caybro requested review from micieslak, a team and alexjba as code owners December 19, 2024 16:47
@jrainville
Copy link
Member

I did some quick tests on the Status Community.

The performance looks fine.

The only issue I found is that the Banned list is empty
image

I tried master and it works fine, so there is a small broken thing there

@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch from 03f9af4 to 55747bf Compare December 19, 2024 23:27
@caybro
Copy link
Member Author

caybro commented Dec 19, 2024

I did some quick tests on the Status Community.

The performance looks fine.

The only issue I found is that the Banned list is empty image

I tried master and it works fine, so there is a small broken thing there

Ah great, good spot! Wrong enum, fixed :)

@anastasiyaig
Copy link
Contributor

anastasiyaig commented Dec 20, 2024

@caybro i will fix the tests, looking into that now. Just one question: was the second checkbox changed to be not a checkbox on purpose?

image

@caybro
Copy link
Member Author

caybro commented Dec 20, 2024

@caybro i will fix the tests, looking into that now. Just one question: was the second checkbox changed to be not a checkbox on purpose?

image

Oh definitely not and I have no idea what happened here, will check

- fix a bug where the Switch would start animating if it'd been checked
on creation
- add the same property `leftSide` to StatusSwitch (just like
StatusCheckBox), and use `LayoutMirroring` to perform the visual
inversion
- fixup margins and padding, removing hardcoded values, according to
latest Figma designs
- make a difference between a disabled and inactive button by using opacity
- provide smooth color transitions
- add dedicated StoryBook pages
@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch from 55747bf to 2052cd3 Compare December 20, 2024 10:49
@caybro
Copy link
Member Author

caybro commented Dec 20, 2024

@caybro i will fix the tests, looking into that now. Just one question: was the second checkbox changed to be not a checkbox on purpose?

Oh definitely not and I have no idea what happened here, will check

And fixed :)

- removed nested ListViews inside StackLayouts, in order to reduce the
memory footprint and improve performance, and also to be able to better
manage the scrolling
- no more unrolled multiple listviews, which again hurt the performance;
now the views instantiate the delegates dynamically on the fly
- the tab bar and the search fields now stick to the top of the page,
with the users list view scrolling independently
- both views now uniformly use the common `ContactListItemDelegate`
- the received/sent CRs are now combined into one `pendingContacts`
model
- factored out common search/filter criteria into a new, separate SFPM
`UserFilterContainer` component
- fix an issue where StatusContactVerificationIcons wasn't properly
displaying the "blocked" state/icon
- fix documentation comments, removed relative imports, and updated some

Fixes #16612
Fixes #16958
@caybro caybro force-pushed the 16612-settings-optimize-contactsview-settings-page branch from 2052cd3 to 77975e9 Compare December 20, 2024 12:27
@anastasiyaig anastasiyaig force-pushed the 16612-settings-optimize-contactsview-settings-page branch from fe50257 to 6c476aa Compare December 20, 2024 19:25
@anastasiyaig anastasiyaig force-pushed the 16612-settings-optimize-contactsview-settings-page branch from 6c476aa to 3393297 Compare December 23, 2024 13:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Community admin members list - Add copy for no search results Settings: Optimize ContactsView settings page
4 participants