status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement static loading skeleton (#16474)

This commit is contained in:
Parvesh Monu 2023-07-04 16:55:22 +05:30 committed by GitHub
parent ef99bf2ad6
commit affd2a5e76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 497 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/quo2/components/loaders/skeleton/constants.cljs Normal file
View File

@ -0,0 +1,95 @@
(ns quo2.components.loaders.skeleton.constants)
(def ^:const layout-dimensions
{:messages {:height 56
:padding-top 12}
:list-items {:height 56
:padding-top 12}
:notifications {:height 90
:padding-top 8}})
(def ^:const content-dimensions
{:messages {0 {:author {:width 112
:height 8
:margin-bottom 8}
:message {:width 144
:height 16
:margin-bottom 0}}
1 {:author {:width 96
:height 8
:margin-bottom 8}
:message {:width 212
:height 16
:margin-bottom 0}}
2 {:author {:width 80
:height 8
:margin-bottom 8}
:message {:width 249
:height 16
:margin-bottom 0}}
3 {:author {:width 124
:height 8
:margin-bottom 8}
:message {:width 156
:height 16
:margin-bottom 0}}}
:list-items {0 {:author {:width 112
:height 8
:margin-bottom 0}
:message {:width 144
:height 16
:margin-bottom 8}}
1 {:author {:width 96
:height 8
:margin-bottom 0}
:message {:width 212
:height 16
:margin-bottom 8}}
2 {:author {:width 80
:height 8
:margin-bottom 0}
:message {:width 249
:height 16
:margin-bottom 8}}
3 {:author {:width 124
:height 8
:margin-bottom 0}
:message {:width 156
:height 16
:margin-bottom 8}}}
:notifications {0 {:author {:width 109
:height 8
:margin-bottom 8}
:message {:width 167
:height 16
:margin-bottom 8}
:message2 {:width 242
:height 30
:margin-bottom 0}}
1 {:author {:width 165
:height 8
:margin-bottom 8}
:message {:width 112
:height 16
:margin-bottom 8}
:message2 {:width 294
:height 30
:margin-bottom 0}}
2 {:author {:width 136
:height 8
:margin-bottom 8}
:message {:width 178
:height 16
:margin-bottom 8}
:message2 {:width 178
:height 30
:margin-bottom 0}}
3 {:author {:width 136
:height 8
:margin-bottom 8}
:message {:width 166
:height 16
:margin-bottom 8}
:message2 {:width 256
:height 30
:margin-bottom 0}}}})

29
src/quo2/components/loaders/skeleton/style.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns quo2.components.loaders.skeleton.style
(:require [quo2.components.loaders.skeleton.constants :as constants]))
(defn container
[content]
{:flex-direction :row
:padding 12
:padding-top (get-in constants/layout-dimensions [content :padding-top])
:height (get-in constants/layout-dimensions [content :height])})
(defn avatar
[color]
{:height 32
:width 32
:border-radius 16
:background-color color})
(def content-container
{:padding-left 8})
(defn content-view
[{:keys [type index content color]}]
(let [{:keys [width height margin-bottom]}
(get-in constants/content-dimensions [content index type])]
{:height height
:width width
:border-radius 6
:background-color color
:margin-bottom margin-bottom}))

46
src/quo2/components/loaders/skeleton/view.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns quo2.components.loaders.skeleton.view
(:require [quo2.theme :as theme]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.loaders.skeleton.style :as style]
[quo2.components.loaders.skeleton.constants :as constants]))
(defn- skeleton-item
[index content color]
[rn/view {:style (style/container content)}
[rn/view {:style (style/avatar color)}]
[rn/view {:style style/content-container}
[rn/view
{:style (style/content-view
{:type (if (= content :list-items) :message :author)
:index index
:content content
:color color})}]
[rn/view
{:style (style/content-view
{:type (if (= content :list-items) :author :message)
:index index
:content content
:color color})}]
(when (= content :notifications)
[rn/view
{:style (style/content-view {:type :message2
:index index
:content content
:color color})}])]])
(defn- internal-view
[{:keys [content theme blur? parent-height]}]
(let [number-of-skeletons (int (Math/floor (/ parent-height
(get-in constants/layout-dimensions [content :height]))))
color (cond
blur? colors/white-opa-5
(= theme :dark) colors/neutral-90
:else colors/neutral-5)]
[rn/view {:style {:padding 8}}
(doall
(for [index (range number-of-skeletons)]
^{:key index}
[skeleton-item (mod index 4) content color]))]))
(def view (theme/with-theme internal-view))

6
src/quo2/core.cljs
View File

@ -49,6 +49,7 @@
quo2.components.list-items.preview-list
quo2.components.list-items.user-list
quo2.components.loaders.skeleton
quo2.components.loaders.skeleton.view
quo2.components.markdown.list.view
quo2.components.markdown.text
quo2.components.messages.author.view
@ -112,7 +113,6 @@
(def disclaimer quo2.components.selectors.disclaimer.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox)
(def filter quo2.components.selectors.filter.view/view)
(def skeleton quo2.components.loaders.skeleton/skeleton)
(def author quo2.components.messages.author.view/author)
;;;; SELECTORS
@ -190,6 +190,10 @@
(def preview-list quo2.components.list-items.preview-list/preview-list)
(def user-list quo2.components.list-items.user-list/user-list)
;;;; LOADERS
(def skeleton quo2.components.loaders.skeleton/skeleton)
(def static-skeleton quo2.components.loaders.skeleton.view/view)
;;;; NAVIGATION
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def page-nav quo2.components.navigation.page-nav/page-nav)

43
src/status_im2/contexts/quo_preview/loaders/skeleton.cljs Normal file
View File

@ -0,0 +1,43 @@
(ns status-im2.contexts.quo-preview.loaders.skeleton
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Content:"
:key :content
:type :select
:options [{:key :list-items
:value "List items"}
{:key :notifications
:value "Notifications"}
{:key :messages
:value "Messages"}]}
{:label "Blur?"
:key :blur?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:content :messages
:blur? false
:parent-height 600})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
[quo/static-skeleton @state]]]])))
(defn preview-skeleton
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

8
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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]
[status-im2.contexts.quo-preview.profile.collectible :as collectible]
[status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
[status-im2.contexts.quo-preview.profile.select-profile :as select-profile]
@ -98,6 +97,7 @@
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
[status-im2.contexts.quo-preview.keycard.keycard :as keycard]
[status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
(def screens-categories
@ -244,6 +244,9 @@
{:name :user-list
:options {:topBar {:visible true}}
:component user-list/preview-user-list}]
:loaders [{:name :skeleton
:options {:topBar {:visible true}}
:component skeleton/preview-skeleton}]
:markdown [{:name :texts
:options {:topBar {:visible true}}
:component text/preview-text}
@ -283,9 +286,6 @@
:onboarding [{:name :small-option-card
:options {:topBar {:visible true}}
:component small-option-card/preview-small-option-card}]
:posts-and-attachments [{:name :messages-skeleton
:options {:topBar {:visible true}}
:component messages-skeleton/preview-messages-skeleton}]
:password [{:name :tips
:options {:topBar {:visible true}}
:component tips/preview-tips}]

13
src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs
View File

@ -1,13 +0,0 @@
(ns status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton
(:require [quo.react-native :as rn]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]))
(defn preview-messages-skeleton
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-90)
:flex 1}
[quo/skeleton]])