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.

Sign up for GitHub

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

Jump to bottom

Optimized ScrollView instead of FlatList for desktop chat #8164

Merged
merged 1 commit into from May 21, 2019
Merged

Optimized ScrollView instead of FlatList for desktop chat #8164

merged 1 commit into from May 21, 2019

Conversation

vkjr
Copy link
Contributor

@vkjr vkjr commented May 9, 2019 •
edited by 0xc1c4da

fixes #8163

Summary

FlatList implementation in react-native-desktop works slow and makes chat in mobile ui for desktop unusable

As a workaround, until FlatList implementation is buggy we can use ScrollView component that has optimization on Qt side of react-native-desktop.

Review notes

ScrollView that used instead of FlatList taken from current desktop UI and works the same way

Testing notes

Currently in new mobile UI you can't open user profile by clicking on his avatar. This is a known issue. I have a solution for it in react-native-desktop but this solution causes bug in old desktop UI which is default now (only part of avatar image responds to click.)
My suggestion is to leave this bug for now and fix it before we fully switch to new UI

Platforms

  • Android
  • iOS
  • macOS
  • Linux
  • Windows

Areas that maybe impacted

Only chat area should be impacted

Functional
  • 1-1 chats
  • public chats
  • group chats

Steps to test

  • enable mobile UI by setting MOBILE_UI_FOR_DESKTOP=1 in .env file
  • make sure that chat has better performance and behaves the same way as a current desktop UI.

status: ready

@vkjr vkjr added the desktop label May 9, 2019
mandrigin
mandrigin approved these changes May 9, 2019
View reviewed changes
Copy link
Contributor

@mandrigin mandrigin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good overall

src/status_im/ui/screens/chat/views.cljs Show resolved Hide resolved
@status-im-auto
Copy link
Member

status-im-auto commented May 9, 2019 •
edited

Jenkins Builds

Click to see older builds (21)
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ da93449 #1 2019-05-09 10:38:04 ~19 min macos 📦 dmg
✔️ da93449 #1 2019-05-09 10:42:00 ~23 min android-e2e 📦 apk
✔️ da93449 #1 2019-05-09 10:43:20 ~25 min android 📦 apk
✔️ da93449 #1 2019-05-09 10:44:58 ~26 min ios 📦 ipa
✔️ da93449 #1 2019-05-09 10:47:30 ~29 min windows 📦 exe
✔️ da93449 #1 2019-05-09 10:51:13 ~32 min linux 📦 App
✔️ ccc9f93 #2 2019-05-09 11:28:37 ~41 min macos 📦 dmg
✔️ ccc9f93 #2 2019-05-09 11:35:56 ~48 min ios 📦 ipa
✔️ ccc9f93 #2 2019-05-09 11:43:57 ~56 min linux 📦 App
✔️ ccc9f93 #2 2019-05-09 11:46:51 ~59 min android-e2e 📦 apk
✔️ ccc9f93 #2 2019-05-09 11:48:09 ~1 hr 1 min android 📦 apk
✔️ ccc9f93 #2 2019-05-09 11:55:43 ~1 hr 8 min windows 📦 exe
❌ 88d74e4 #3 2019-05-10 09:47:00 ~8 min ios 📄 log
❌ 88d74e4 #3 2019-05-10 09:59:57 ~21 min android-e2e 📄 log
✔️ 88d74e4 #3 2019-05-10 10:01:29 ~23 min macos 📦 dmg
✔️ 88d74e4 #3 2019-05-10 10:05:35 ~27 min android 📦 apk
✔️ 88d74e4 #3 2019-05-10 10:07:33 ~29 min linux 📦 App
✔️ 88d74e4 #3 2019-05-10 10:11:45 ~33 min windows 📦 exe
✔️ 88d74e4 #4 2019-05-10 10:29:52 ~26 min ios 📦 ipa
❌ 88d74e4 #4 2019-05-10 10:34:24 ~30 min android-e2e 📄 log
❌ 7adbfee #4 2019-05-19 22:08:26 ~32 sec android 📄 log
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
❌ a13ccdb #6 2019-05-19 22:25:57 ~16 min android-e2e 📄 log
✔️ a13ccdb #5 2019-05-19 22:27:49 ~18 min windows 📦 exe
✔️ a13ccdb #5 2019-05-19 22:28:33 ~19 min macos 📦 dmg
✔️ a13ccdb #5 2019-05-19 22:29:18 ~19 min android 📦 apk
✔️ a13ccdb #5 2019-05-19 22:29:52 ~20 min linux 📦 App
✔️ a13ccdb #6 2019-05-19 22:33:34 ~24 min ios 📦 ipa
❌ a13ccdb #7 2019-05-20 11:18:45 ~21 min android-e2e 📄 log
❌ a13ccdb #8 2019-05-20 13:39:58 ~42 min android-e2e 📄 log
✔️ a6669da #6 2019-05-20 15:43:58 ~27 min android 📦 apk
✔️ a6669da #6 2019-05-20 15:45:05 ~29 min linux 📦 App
✔️ a6669da #6 2019-05-20 15:46:10 ~30 min macos 📦 dmg
✔️ a6669da #6 2019-05-20 15:47:03 ~30 min windows 📦 exe
✔️ a6669da #9 2019-05-20 15:48:12 ~32 min android-e2e 📦 apk
✔️ a6669da #7 2019-05-20 15:59:01 ~42 min ios 📦 ipa

@vkjr vkjr self-assigned this May 9, 2019
@vkjr vkjr force-pushed the fix/new_list_for_desktopui branch from da93449 to ccc9f93 Compare May 9, 2019 10:47
@status-github-bot
Copy link

status-github-bot bot commented May 9, 2019 •
edited by vkjr

Pull Request Checklist

  • Have you updated the documentation, if impacted (e.g. docs.status.im)?

@flexsurfer
Copy link
Member

@vkjr what about other places where flatlist is used? tbh i thought that we make changes in flatlist component itself?

@flexsurfer
Copy link
Member

i mean something like

(defn flat-list
  "A wrapper for FlatList.
   See https://facebook.github.io/react-native/docs/flatlist.html"
  [{:keys [data] :as props}]
  {:pre [(or (nil? data)
             (sequential? data))]}
(if desktop?
  [flat-list-scroll-view props]
  [flat-list-class
   (merge (base-list-props props)
          props
          {:data (wrap-data data)})])

@vkjr
Copy link
Contributor Author

vkjr commented May 9, 2019

@flexsurfer, flatlist shows bad performance when there are a lot of elements and a lot of dynamic loads\unloads needed (lot of scrolling). So far it looks like in other places except chat it doesn't affect user experience. If you think that it would be a more clean solution - I can substitute it everywhere but I also think that it would be good to reduce the surface where mobile and desktop code differs as much as possible.

@mandrigin
Copy link
Contributor

@flexsurfer @vkjr in this discussion I would accept @vkjr's side, taking into accoun that that is a temporary measure and we dont want to spend too much time fixing potential regressions by replacing FlatList with ScrollView in the other places.

@flexsurfer
Copy link
Member

@flexsurfer, flatlist shows bad performance when there are a lot of elements and a lot of dynamic loads\unloads needed (lot of scrolling). So far it looks like in other places except chat it doesn't affect user experience. If you think that it would be a more clean solution - I can substitute it everywhere but I also think that it would be good to reduce the surface where mobile and desktop code differs as much as possible.

ok then :)

@flexsurfer flexsurfer added this to REVIEW in Pipeline for QA via automation May 9, 2019
@flexsurfer flexsurfer moved this from REVIEW to E2E Tests in Pipeline for QA May 9, 2019
@statustestbot
Copy link

98% of end-end tests have passed

Total executed tests: 49
Failed tests: 1
Passed tests: 48

Failed tests (1)

Click to expand
1. test_backup_recovery_phrase_warning_from_wallet

Device 1: Wait for PlusButton
Device 1: Wait for PlusButton

Donation was not received during 300 seconds!

Device sessions

Passed tests (48)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_send_transaction_from_daap
Device sessions

5. test_request_and_receive_tokens_in_1_1_chat
Device sessions

6. test_deploy_contract_from_daap
Device sessions

7. test_open_transaction_on_etherscan
Device sessions

8. test_public_chat_messaging
Device sessions

9. test_password_in_logcat_sign_in
Device sessions

10. test_text_message_1_1_chat
Device sessions

11. test_add_to_contacts
Device sessions

12. test_sign_typed_message (TestRail link is not found)
Device sessions

13. test_unread_messages_counter_1_1_chat
Device sessions

14. test_logcat_send_transaction_from_daap
Device sessions

15. test_send_message_in_group_chat
Device sessions

16. test_logcat_send_transaction_from_wallet
Device sessions

17. test_send_token_with_7_decimals
Device sessions

18. test_modify_transaction_fee_values
Device sessions

19. test_send_eth_from_wallet_to_address
Device sessions

20. test_manage_assets
Device sessions

21. test_logcat_send_transaction_in_1_1_chat
Device sessions

22. test_request_and_receive_eth_in_1_1_chat
Device sessions

23. test_swipe_to_delete_public_chat
Device sessions

24. test_send_emoji
Device sessions

25. test_search_chat_on_home
Device sessions

26. test_logcat_recovering_account
Device sessions

27. test_messaging_in_different_networks
Device sessions

28. test_send_tokens_in_1_1_chat
Device sessions

29. test_network_mismatch_for_send_request_commands
Device sessions

30. test_logcat_sign_message_from_daap
Device sessions

31. test_swipe_to_delete_1_1_chat
Device sessions

32. test_switch_users_and_add_new_account
Device sessions

33. test_send_stt_from_wallet
Device sessions

34. test_send_eth_in_1_1_chat
Device sessions

35. test_login_with_new_account
Device sessions

36. test_send_eth_from_wallet_to_contact
Device sessions

37. test_add_contact_from_public_chat
Device sessions

38. test_send_two_transactions_one_after_another_in_dapp
Device sessions

39. test_password_in_logcat_creating_account
Device sessions

40. test_backup_recovery_phrase
Device sessions

41. test_offline_status
Device sessions

42. test_open_google_com_via_open_dapp
Device sessions

43. test_unread_messages_counter_public_chat
Device sessions

44. test_sign_message_from_daap
Device sessions

45. test_user_can_remove_profile_picture
Device sessions

46. test_share_contact_code_and_wallet_address
Device sessions

47. test_request_eth_in_wallet
Device sessions

48. test_refresh_button_browsing_app_webview
Device sessions

@churik churik moved this from E2E Tests to TO TEST in Pipeline for QA May 10, 2019
@churik churik moved this from TO TEST to IN TESTING in Pipeline for QA May 10, 2019
@churik churik self-assigned this May 10, 2019
@churik
Copy link
Member

churik commented May 10, 2019

@vkjr
overall experience: scroll is definitely is better, but some new issues are found:

1) Input is not erased after sending messages

Steps:

  • create account
  • join any chat
  • send a message
    Expected result: input is erased after sending
    Actual result: input is preseved after sending
    Platform: mobile UI (Mac OSx)

2)Can't fetch the previous history

Steps:

  • create account
  • join any public chat
  • tap on "Fetch more messages"
    Expected result: messages are fetched
    Actual result: error
    Platform: mobile UI (Mac OSx)
    asdsadsad

3)Share my code is not visible

Steps:

  • create account
  • go to profile
  • tap on "Share my contact code"
    Expected result: input is erased after sending
    Actual result: input is preseved after sending
    Platform: mobile UI (Mac OSx)
    fdfsdf

Didn't notice issues with mobile / regular desktop builds.

@churik churik moved this from IN TESTING to CONTRIBUTOR in Pipeline for QA May 10, 2019
@vkjr vkjr requested review from jakubgs and a team as code owners May 19, 2019 22:07
@vkjr
Copy link
Contributor Author

vkjr commented May 20, 2019

@churik

  1. Fixed
  2. Fixed
  3. I noticed that QR-code shows up if you use a scroll on a "share my profile page". So I suspect there can be some issue with react-native-desktop. I would suggest to put it aside until mobile UI is not default and 2-pane UI is not there because that can take time and I think implementing 2-pane UI has bigger priority. wdyt?

Also in mobile UI you can notice that text input doesn't reset to blank if message sent with send icon. It is expected behavior for now. In main branch of react-native-desktop this problem fixed already but we can't switch to it until fully switch to mobile UI because old desktop UI built with incorrect workaround of that problem. So I suggested also to save some time and ignore issue until mobile UI become default.

@churik churik moved this from CONTRIBUTOR to TO TEST in Pipeline for QA May 20, 2019
@churik churik moved this from TO TEST to IN TESTING in Pipeline for QA May 20, 2019
@churik
Copy link
Member

churik commented May 20, 2019

@vkjr Can't get build android e2e build, can you take a look?
https://ci.status.im/job/status-react/job/prs/job/android-e2e/job/PR-8164/7/

@vkjr
Copy link
Contributor Author

vkjr commented May 20, 2019

Some problem on last upload stage, so restarted it

@vkjr
Copy link
Contributor Author

vkjr commented May 20, 2019

@jakubgs, could you please take a look? I see Invalid or unsupported command "saucelabs" error while building android-e2e. Have no idea what it is about.

@churik
Copy link
Member

churik commented May 20, 2019

@vkjr can you rebase please?

@jakubgs
Copy link
Member

jakubgs commented May 20, 2019

Please rabase on develop so you include this commit: cc009a3
Your branch still is using FASTLANE_SCRIPT which has a bug that caused it to be empty.

@vkjr vkjr force-pushed the fix/new_list_for_desktopui branch from a13ccdb to a6669da Compare May 20, 2019 15:15
@vkjr
Copy link
Contributor Author

vkjr commented May 20, 2019

Done

@statustestbot
Copy link

98% of end-end tests have passed

Total executed tests: 49
Failed tests: 1
Passed tests: 48

Failed tests (1)

Click to expand
1. test_request_and_receive_tokens_in_1_1_chat

Device 2: Looking for a message by text: '0.052016554'
Device 2: Wait for ChatElementByText

Message with the sent amount is not shown for the recipient

Device sessions

Passed tests (48)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_send_transaction_from_daap
Device sessions

5. test_deploy_contract_from_daap
Device sessions

6. test_open_transaction_on_etherscan
Device sessions

7. test_public_chat_messaging
Device sessions

8. test_long_press_to_delete_1_1_chat
Device sessions

9. test_password_in_logcat_sign_in
Device sessions

10. test_text_message_1_1_chat
Device sessions

11. test_add_to_contacts
Device sessions

12. test_sign_typed_message (TestRail link is not found)
Device sessions

13. test_unread_messages_counter_1_1_chat
Device sessions

14. test_logcat_send_transaction_from_daap
Device sessions

15. test_send_message_in_group_chat
Device sessions

16. test_logcat_send_transaction_from_wallet
Device sessions

17. test_send_token_with_7_decimals
Device sessions

18. test_modify_transaction_fee_values
Device sessions

19. test_send_eth_from_wallet_to_address
Device sessions

20. test_manage_assets
Device sessions

21. test_logcat_send_transaction_in_1_1_chat
Device sessions

22. test_request_and_receive_eth_in_1_1_chat
Device sessions

23. test_long_press_to_delete_public_chat
Device sessions

24. test_send_emoji
Device sessions

25. test_search_chat_on_home
Device sessions

26. test_logcat_recovering_account
Device sessions

27. test_messaging_in_different_networks
Device sessions

28. test_send_tokens_in_1_1_chat
Device sessions

29. test_network_mismatch_for_send_request_commands
Device sessions

30. test_logcat_sign_message_from_daap
Device sessions

31. test_switch_users_and_add_new_account
Device sessions

32. test_send_stt_from_wallet
Device sessions

33. test_send_eth_in_1_1_chat
Device sessions

34. test_login_with_new_account
Device sessions

35. test_send_eth_from_wallet_to_contact
Device sessions

36. test_add_contact_from_public_chat
Device sessions

37. test_send_two_transactions_one_after_another_in_dapp
Device sessions

38. test_password_in_logcat_creating_account
Device sessions

39. test_backup_recovery_phrase
Device sessions

40. test_offline_status
Device sessions

41. test_open_google_com_via_open_dapp
Device sessions

42. test_unread_messages_counter_public_chat
Device sessions

43. test_sign_message_from_daap
Device sessions

44. test_user_can_remove_profile_picture
Device sessions

45. test_share_contact_code_and_wallet_address
Device sessions

46. test_request_eth_in_wallet
Device sessions

47. test_refresh_button_browsing_app_webview
Device sessions

48. test_backup_recovery_phrase_warning_from_wallet
Device sessions

@churik
Copy link
Member

churik commented May 21, 2019

Tested briefly (creating accounts, chatting) on Linux Ubuntu 18.04, Windows 10 Home, Mac OSx (normal desktop builds) and on IOS 11.4.1 (IPhone 7), Android 8 (LG V20) - no regression is found.

@statustestbot
Copy link

100% of end-end tests have passed

Total executed tests: 1
Failed tests: 0
Passed tests: 1

Passed tests (1)

Click to expand
1. test_request_and_receive_tokens_in_1_1_chat
Device sessions

@churik churik moved this from IN TESTING to MERGE in Pipeline for QA May 21, 2019
@vkjr @flexsurfer
Optimized ScrollView instead of FlatList for desktop chat
add7597 
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
@flexsurfer flexsurfer merged commit add7597 into develop May 21, 2019
Pipeline for QA automation moved this from MERGE to DONE May 21, 2019
@delete-merged-branch delete-merged-branch bot deleted the fix/new_list_for_desktopui branch May 21, 2019 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mandrigin mandrigin mandrigin approved these changes

@flexsurfer flexsurfer flexsurfer approved these changes

@rasom rasom Awaiting requested review from rasom

@jakubgs jakubgs Awaiting requested review from jakubgs

Assignees

@churik churik

Labels
Tested - OK
Projects
Pipeline for QA
  
DONE
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bad chat performance in mobile UI for desktop
7 participants
@vkjr @status-im-auto @flexsurfer @mandrigin @statustestbot @churik @jakubgs