Implement static loading skeleton #16474

Parveshdhull · 2023-07-03T22:44:48Z

Summary

PR implements a loading skeleton as per Figma design parameters and also adds missing content types.
PR just adds a static loading skeleton, animation of the loading skeleton will be implemented separately.
Once the animation is implemented we can remove the current implementation, until then we have to keep both.
(will create an issue for that)

Testing

Manual testing doesn't require, PR just implements the quo2 component.

status: ready

Parveshdhull · 2023-07-03T22:46:05Z

src/status_im2/contexts/quo_preview/main.cljs

@@ -67,7 +67,6 @@
    [status-im2.contexts.quo-preview.notifications.toast :as toast]
    [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
    [status-im2.contexts.quo-preview.password.tips :as tips]
-    [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton]


Probably outdated, currently just a blank screen. Animated skeleton will be part of new preview screen

status-im-auto · 2023-07-03T22:51:23Z

Jenkins Builds

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`01fa31f`	#1	2023-07-03 22:51:23	~6 min	`ios`	📱`ipa` 📲
✔️	`01fa31f`	#1	2023-07-03 22:51:30	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`01fa31f`	#1	2023-07-03 22:53:00	~7 min	`android`	🤖`apk` 📲
✔️	`01fa31f`	#1	2023-07-03 22:53:28	~8 min	`tests`	📄`log`

✔️	`d87b706`	#2	2023-07-04 11:16:18	~5 min	`ios`	📱`ipa` 📲
✔️	`d87b706`	#2	2023-07-04 11:16:28	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`d87b706`	#2	2023-07-04 11:16:36	~6 min	`android`	🤖`apk` 📲
✔️	`d87b706`	#2	2023-07-04 11:17:51	~7 min	`tests`	📄`log`

status-im-auto · 2023-07-03T23:38:35Z

91% of end-end tests have passed

Total executed tests: 33
Failed tests: 3
Passed tests: 30
Not executed tests: 1

IDs of not executed tests: 703202

IDs of failed tests: 702732,703086,702731

Not executed tests (1)

Click to expand

Rerun not executed tests

Failed tests (3)

Click to expand

Rerun failed tests

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Class TestCommunityMultipleDeviceMerged:

1. test_community_mark_all_messages_as_read, id: 703086

Device 1: Find Button by accessibility id: mark-as-read
Device 1: Tap on found: Button

critical/test_public_chat_browsing.py:837: in test_community_mark_all_messages_as_read
    self.errors.verify_no_errors()
base_test_case.py:182: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 New messages counter is not shown in home > Commmunity element

Device sessions

Device 1:

Device 2:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_pin_messages, id: 702731
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Passed tests (30)

Click to expand

Class TestActivityMultipleDevicePR:

1. test_activity_center_mentions, id: 702957
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_navigation_jump_to, id: 702936
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_activity_center_admin_notification_accept_swipe, id: 702958
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_contact_request_decline, id: 702850
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_offline_pn, id: 702808
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_one_image_send_reply, id: 702859
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_contact_block_unblock_offline, id: 702894
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_mentions_push_notification, id: 702786
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_community_message_send_check_timestamps_sender_username, id: 702838
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
9. test_community_message_edit, id: 702843
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
10. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
11. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_1_1_chat_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_edit_message, id: 702855
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
Device sessions Device 1: Steps, video, logs
2. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs
3. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs

J-Son89 · 2023-07-04T09:41:36Z

src/quo2/components/loaders/skeleton/view.cljs

+        ^{:key index}
+        [skeleton-item (mod index 4) content color]))]))
+
+(def view (theme/with-theme internal-view))


J-Son89 · 2023-07-04T09:43:49Z

src/quo2/core.cljs

@@ -113,6 +114,7 @@
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def filter quo2.components.selectors.filter.view/view)
 (def skeleton quo2.components.loaders.skeleton/skeleton)
+(def static-skeleton quo2.components.loaders.skeleton.view/view)


could you make a loaders section and move it to that? same for other loaders in this file!

smohamedjavid

@Parveshdhull - Thank you for the PR!

I found that the skeleton works only on Light mode and Dark mode + blur. Is this expected? I believe this is not the case. Correct me if i'm wrong.

Light Mode	Light Mode + Blur	Dark Mode	Dark Mode + Blur

smohamedjavid · 2023-07-04T09:42:51Z

src/quo2/components/loaders/skeleton/style.cljs

+
+(defn content-view
+  [{:keys [type index content color]}]
+  (let [{:keys [width height margin-bottom margin-top]}


margin-top is not in constants/content-dimensions.

smohamedjavid · 2023-07-04T09:43:56Z

src/quo2/components/loaders/skeleton/view.cljs

+                                    :content content
+                                    :color   color})}])]])
+
+(defn internal-view


Small Improvement: Updating internal-view as private would prevent using it without theme context.

smohamedjavid · 2023-07-04T09:44:05Z

src/status_im2/contexts/quo_preview/loaders/skeleton.cljs

+   {:label "Blur?"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Animated?" ;; Not implemented yet


Is it fine to not have this option until the animation is implemented?

J-Son89

Looks great, nice work @Parveshdhull!
Consider adding a few component spec test if possible too. 👍

Parveshdhull · 2023-07-04T11:16:25Z

Hi @smohamedjavid and @J-Son89, Thank you very much for reviewing PR.
Created a follow-up issue #16482

I found that the skeleton works only on Light mode and Dark mode + blur. Is this expected? I believe this is not the case. Correct me if i'm wrong.

Thanks for spotting it. The problem was in the preview screen itself. It was using the same color as the loading skeleton in dark mode.
Light mode + blur is just white color with opacity, so should not be visible.

Parveshdhull requested review from smohamedjavid and J-Son89 July 3, 2023 22:44

Parveshdhull self-assigned this Jul 3, 2023

Parveshdhull commented Jul 3, 2023

View reviewed changes

J-Son89 reviewed Jul 4, 2023

View reviewed changes

smohamedjavid reviewed Jul 4, 2023

View reviewed changes

J-Son89 approved these changes Jul 4, 2023

View reviewed changes

Parveshdhull added 2 commits July 4, 2023 16:26

Implement loading skeleton

3cb58e4

Review changes

d87b706

Parveshdhull force-pushed the chore/refactor-loading-skeletong branch from 01fa31f to d87b706 Compare July 4, 2023 11:10

smohamedjavid approved these changes Jul 4, 2023

View reviewed changes

Parveshdhull mentioned this pull request Jul 4, 2023

Animate loading skeleton #16482

Closed

3 tasks

Parveshdhull merged commit affd2a5 into develop Jul 4, 2023

Parveshdhull deleted the chore/refactor-loading-skeletong branch July 4, 2023 11:25

codemaster115 pushed a commit that referenced this pull request Jul 7, 2023

Implement static loading skeleton (#16474)

8fbd544

FFFra mentioned this pull request Aug 3, 2023

FF/animate-loading-skeleton #16865

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement static loading skeleton #16474

Implement static loading skeleton #16474

Parveshdhull commented Jul 3, 2023 •

edited

Loading

Parveshdhull Jul 3, 2023

status-im-auto commented Jul 3, 2023 •

edited

Loading

status-im-auto commented Jul 3, 2023

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestActivityMultipleDevicePR:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityOneDeviceMerged:

J-Son89 Jul 4, 2023

J-Son89 Jul 4, 2023

smohamedjavid left a comment

smohamedjavid Jul 4, 2023

smohamedjavid Jul 4, 2023

smohamedjavid Jul 4, 2023

J-Son89 left a comment

Parveshdhull commented Jul 4, 2023 •

edited

Loading

Implement static loading skeleton #16474

Implement static loading skeleton #16474

Conversation

Parveshdhull commented Jul 3, 2023 • edited Loading

Summary

Testing

Parveshdhull Jul 3, 2023

Choose a reason for hiding this comment

status-im-auto commented Jul 3, 2023 • edited Loading

Jenkins Builds

status-im-auto commented Jul 3, 2023

91% of end-end tests have passed

Not executed tests (1)

Failed tests (3)

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Passed tests (30)

Class TestActivityMultipleDevicePR:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityOneDeviceMerged:

J-Son89 Jul 4, 2023

Choose a reason for hiding this comment

J-Son89 Jul 4, 2023

Choose a reason for hiding this comment

smohamedjavid left a comment

Choose a reason for hiding this comment

smohamedjavid Jul 4, 2023

Choose a reason for hiding this comment

smohamedjavid Jul 4, 2023

Choose a reason for hiding this comment

smohamedjavid Jul 4, 2023

Choose a reason for hiding this comment

J-Son89 left a comment

Choose a reason for hiding this comment

Parveshdhull commented Jul 4, 2023 • edited Loading

Parveshdhull commented Jul 3, 2023 •

edited

Loading

status-im-auto commented Jul 3, 2023 •

edited

Loading

Parveshdhull commented Jul 4, 2023 •

edited

Loading