mirror of
https://github.com/status-im/status-react.git
synced 2025-02-19 22:28:40 +00:00
Implement static loading skeleton (#16474)
This commit is contained in:
parent
ef99bf2ad6
commit
affd2a5e76
95
src/quo2/components/loaders/skeleton/constants.cljs
Normal file
95
src/quo2/components/loaders/skeleton/constants.cljs
Normal 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
29
src/quo2/components/loaders/skeleton/style.cljs
Normal 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
46
src/quo2/components/loaders/skeleton/view.cljs
Normal 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))
|
@ -49,6 +49,7 @@
|
|||||||
quo2.components.list-items.preview-list
|
quo2.components.list-items.preview-list
|
||||||
quo2.components.list-items.user-list
|
quo2.components.list-items.user-list
|
||||||
quo2.components.loaders.skeleton
|
quo2.components.loaders.skeleton
|
||||||
|
quo2.components.loaders.skeleton.view
|
||||||
quo2.components.markdown.list.view
|
quo2.components.markdown.list.view
|
||||||
quo2.components.markdown.text
|
quo2.components.markdown.text
|
||||||
quo2.components.messages.author.view
|
quo2.components.messages.author.view
|
||||||
@ -112,7 +113,6 @@
|
|||||||
(def disclaimer quo2.components.selectors.disclaimer.view/view)
|
(def disclaimer quo2.components.selectors.disclaimer.view/view)
|
||||||
(def checkbox quo2.components.selectors.selectors.view/checkbox)
|
(def checkbox quo2.components.selectors.selectors.view/checkbox)
|
||||||
(def filter quo2.components.selectors.filter.view/view)
|
(def filter quo2.components.selectors.filter.view/view)
|
||||||
(def skeleton quo2.components.loaders.skeleton/skeleton)
|
|
||||||
(def author quo2.components.messages.author.view/author)
|
(def author quo2.components.messages.author.view/author)
|
||||||
|
|
||||||
;;;; SELECTORS
|
;;;; SELECTORS
|
||||||
@ -190,6 +190,10 @@
|
|||||||
(def preview-list quo2.components.list-items.preview-list/preview-list)
|
(def preview-list quo2.components.list-items.preview-list/preview-list)
|
||||||
(def user-list quo2.components.list-items.user-list/user-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
|
;;;; NAVIGATION
|
||||||
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
|
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
|
||||||
(def page-nav quo2.components.navigation.page-nav/page-nav)
|
(def page-nav quo2.components.navigation.page-nav/page-nav)
|
||||||
|
43
src/status_im2/contexts/quo_preview/loaders/skeleton.cljs
Normal file
43
src/status_im2/contexts/quo_preview/loaders/skeleton.cljs
Normal 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}]])
|
@ -67,7 +67,6 @@
|
|||||||
[status-im2.contexts.quo-preview.notifications.toast :as toast]
|
[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.onboarding.small-option-card :as small-option-card]
|
||||||
[status-im2.contexts.quo-preview.password.tips :as tips]
|
[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.collectible :as collectible]
|
||||||
[status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
|
[status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
|
||||||
[status-im2.contexts.quo-preview.profile.select-profile :as select-profile]
|
[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.network-breakdown :as network-breakdown]
|
||||||
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
|
[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.keycard.keycard :as keycard]
|
||||||
|
[status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
|
||||||
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
|
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
|
||||||
|
|
||||||
(def screens-categories
|
(def screens-categories
|
||||||
@ -244,6 +244,9 @@
|
|||||||
{:name :user-list
|
{:name :user-list
|
||||||
:options {:topBar {:visible true}}
|
:options {:topBar {:visible true}}
|
||||||
:component user-list/preview-user-list}]
|
:component user-list/preview-user-list}]
|
||||||
|
:loaders [{:name :skeleton
|
||||||
|
:options {:topBar {:visible true}}
|
||||||
|
:component skeleton/preview-skeleton}]
|
||||||
:markdown [{:name :texts
|
:markdown [{:name :texts
|
||||||
:options {:topBar {:visible true}}
|
:options {:topBar {:visible true}}
|
||||||
:component text/preview-text}
|
:component text/preview-text}
|
||||||
@ -283,9 +286,6 @@
|
|||||||
:onboarding [{:name :small-option-card
|
:onboarding [{:name :small-option-card
|
||||||
:options {:topBar {:visible true}}
|
:options {:topBar {:visible true}}
|
||||||
:component small-option-card/preview-small-option-card}]
|
: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
|
:password [{:name :tips
|
||||||
:options {:topBar {:visible true}}
|
:options {:topBar {:visible true}}
|
||||||
:component tips/preview-tips}]
|
:component tips/preview-tips}]
|
||||||
|
@ -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]])
|
|
Loading…
x
Reference in New Issue
Block a user