status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-18 22:08:10 +00:00
Code Issues Projects Releases Wiki Activity

Implement static loading skeleton (#16474)

Browse Source
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.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
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}]])

558
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.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,287 +97,288 @@
[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
{:foundations [{:name :shadows {:foundations [{:name :shadows
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component shadows/preview-shadows}] :component shadows/preview-shadows}]
:animated-list [{:name :animated-header-list :animated-list [{:name :animated-header-list
:options {:topBar {:visible false}} :options {:topBar {:visible false}}
:component animated-header-list/mock-screen}] :component animated-header-list/mock-screen}]
:avatar [{:name :group-avatar :avatar [{:name :group-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component group-avatar/preview-group-avatar} :component group-avatar/preview-group-avatar}
{:name :icon-avatar {:name :icon-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component icon-avatar/preview-icon-avatar} :component icon-avatar/preview-icon-avatar}
{:name :user-avatar {:name :user-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component user-avatar/preview-user-avatar} :component user-avatar/preview-user-avatar}
{:name :wallet-user-avatar {:name :wallet-user-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component wallet-user-avatar/preview-wallet-user-avatar} :component wallet-user-avatar/preview-wallet-user-avatar}
{:name :channel-avatar {:name :channel-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component channel-avatar/preview-channel-avatar} :component channel-avatar/preview-channel-avatar}
{:name :account-avatar {:name :account-avatar
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component account-avatar/preview-account-avatar}] :component account-avatar/preview-account-avatar}]
:banner [{:name :banner :banner [{:name :banner
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component banner/preview-banner}] :component banner/preview-banner}]
:buttons [{:name :button :buttons [{:name :button
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component button/preview-button} :component button/preview-button}
{:name :dynamic-button {:name :dynamic-button
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component dynamic-button/preview-dynamic-button} :component dynamic-button/preview-dynamic-button}
{:name :slide-button {:name :slide-button
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component slide-button/preview-slide-button} :component slide-button/preview-slide-button}
{:name :predictive-keyboard {:name :predictive-keyboard
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component predictive-keyboard/preview-predictive-keyboard}] :component predictive-keyboard/preview-predictive-keyboard}]
:code [{:name :snippet :code [{:name :snippet
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component code-snippet/preview-code-snippet}] :component code-snippet/preview-code-snippet}]
:colors [{:name :color-picker :colors [{:name :color-picker
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component color-picker/preview-color-picker}] :component color-picker/preview-color-picker}]
:community [{:name :community-card-view :community [{:name :community-card-view
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component community-card/preview-community-card} :component community-card/preview-community-card}
{:name :community-list-view {:name :community-list-view
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component community-list-view/preview-community-list-view} :component community-list-view/preview-community-list-view}
{:name :community-membership-list-view {:name :community-membership-list-view
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component community-membership-list-view/preview-community-list-view} :component community-membership-list-view/preview-community-list-view}
{:name :discover-card {:name :discover-card
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component discover-card/preview-discoverd-card} :component discover-card/preview-discoverd-card}
{:name :token-gating {:name :token-gating
:options {:insets {:bottom? true} :options {:insets {:bottom? true}
:topBar {:visible true}} :topBar {:visible true}}
:component token-gating/preview-token-gating} :component token-gating/preview-token-gating}
{:name :channel-actions {:name :channel-actions
:options {:insets {:bottom? true} :options {:insets {:bottom? true}
:topBar {:visible true}} :topBar {:visible true}}
:component channel-actions/preview-channel-actions}] :component channel-actions/preview-channel-actions}]
:counter [{:name :counter :counter [{:name :counter
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component counter/preview-counter} :component counter/preview-counter}
{:name :step {:name :step
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component step/preview-step}] :component step/preview-step}]
:dividers [{:name :divider-label :dividers [{:name :divider-label
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component divider-label/preview-divider-label} :component divider-label/preview-divider-label}
{:name :new-messages {:name :new-messages
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component new-messages/preview-new-messages} :component new-messages/preview-new-messages}
{:name :divider-date {:name :divider-date
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component divider-date/preview-divider-date} :component divider-date/preview-divider-date}
{:name :strength-divider {:name :strength-divider
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component strength-divider/preview-strength-divider}] :component strength-divider/preview-strength-divider}]
:drawers [{:name :action-drawers :drawers [{:name :action-drawers
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component action-drawers/preview-action-drawers} :component action-drawers/preview-action-drawers}
{:name :documentation-drawer {:name :documentation-drawer
:insets {:top false} :insets {:top false}
:component documenation-drawers/preview-documenation-drawers} :component documenation-drawers/preview-documenation-drawers}
{:name :drawer-buttons {:name :drawer-buttons
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component drawer-buttons/preview-drawer-buttons} :component drawer-buttons/preview-drawer-buttons}
{:name :permission-drawers {:name :permission-drawers
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component permission-drawers/preview-permission-drawers}] :component permission-drawers/preview-permission-drawers}]
:dropdowns [{:name :dropdown :dropdowns [{:name :dropdown
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component dropdown/preview-dropdown}] :component dropdown/preview-dropdown}]
:empty-state [{:name :empty-state :empty-state [{:name :empty-state
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component empty-state/preview-empty-state}] :component empty-state/preview-empty-state}]
:info [{:name :info-message :info [{:name :info-message
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component info-message/preview-info-message} :component info-message/preview-info-message}
{:name :information-box {:name :information-box
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component information-box/preview-information-box}] :component information-box/preview-information-box}]
:inputs [{:name :input :inputs [{:name :input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component input/preview-input} :component input/preview-input}
{:name :profile-input {:name :profile-input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component profile-input/preview-profile-input} :component profile-input/preview-profile-input}
{:name :recovery-phrase-input {:name :recovery-phrase-input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component recovery-phrase-input/preview-recovery-phrase-input} :component recovery-phrase-input/preview-recovery-phrase-input}
{:name :search-input {:name :search-input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component search-input/preview-search-input} :component search-input/preview-search-input}
{:name :title-input {:name :title-input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component title-input/preview-title-input}] :component title-input/preview-title-input}]
:links [{:name :url-preview :links [{:name :url-preview
:options {:insets {:top? true} :options {:insets {:top? true}
:topBar {:visible true}} :topBar {:visible true}}
:component url-preview/preview} :component url-preview/preview}
{:name :url-preview-list {:name :url-preview-list
:options {:insets {:top? true} :options {:insets {:top? true}
:topBar {:visible true}} :topBar {:visible true}}
:component url-preview-list/preview} :component url-preview-list/preview}
{:name :link-preview {:name :link-preview
:options {:insets {:top? true} :options {:insets {:top? true}
:topBar {:visible true}} :topBar {:visible true}}
:component link-preview/preview}] :component link-preview/preview}]
:list-items [{:name :channel :list-items [{:name :channel
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component channel/preview-channel} :component channel/preview-channel}
{:name :preview-lists {:name :preview-lists
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component preview-lists/preview-preview-lists} :component preview-lists/preview-preview-lists}
{: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}]
:markdown [{:name :texts :loaders [{:name :skeleton
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component text/preview-text} :component skeleton/preview-skeleton}]
{:name :markdown-list :markdown [{:name :texts
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component markdown-list/preview-markdown-list}] :component text/preview-text}
:messages [{:name :gap {:name :markdown-list
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component messages-gap/preview-messages-gap} :component markdown-list/preview-markdown-list}]
{:name :system-messages :messages [{:name :gap
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component system-message/preview-system-message} :component messages-gap/preview-messages-gap}
{:name :author {:name :system-messages
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component messages-author/preview-author}] :component system-message/preview-system-message}
:navigation [{:name :bottom-nav-tab {:name :author
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component bottom-nav-tab/preview-bottom-nav-tab} :component messages-author/preview-author}]
{:name :top-nav :navigation [{:name :bottom-nav-tab
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component top-nav/preview-top-nav} :component bottom-nav-tab/preview-bottom-nav-tab}
{:name :page-nav {:name :top-nav
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component page-nav/preview-page-nav} :component top-nav/preview-top-nav}
{:name :floating-shell-button {:name :page-nav
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component floating-shell-button/preview-floating-shell-button}] :component page-nav/preview-page-nav}
:notifications [{:name :activity-logs {:name :floating-shell-button
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component activity-logs/preview-activity-logs} :component floating-shell-button/preview-floating-shell-button}]
{:name :toast :notifications [{:name :activity-logs
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component toast/preview-toasts} :component activity-logs/preview-activity-logs}
{:name :notification {:name :toast
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component notification/preview-notification}] :component toast/preview-toasts}
:onboarding [{:name :small-option-card {:name :notification
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component small-option-card/preview-small-option-card}] :component notification/preview-notification}]
:posts-and-attachments [{:name :messages-skeleton :onboarding [{:name :small-option-card
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component messages-skeleton/preview-messages-skeleton}] :component small-option-card/preview-small-option-card}]
:password [{:name :tips :password [{:name :tips
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component tips/preview-tips}] :component tips/preview-tips}]
:profile [{:name :profile-card :profile [{:name :profile-card
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component profile-card/preview-profile-card} :component profile-card/preview-profile-card}
{:name :collectible {:name :collectible
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component collectible/preview-collectible} :component collectible/preview-collectible}
{:name :select-profile {:name :select-profile
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component select-profile/preview-select-profile}] :component select-profile/preview-select-profile}]
:reactions [{:name :react :reactions [{:name :react
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component react/preview-react}] :component react/preview-react}]
:record-audio [{:name :record-audio :record-audio [{:name :record-audio
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component record-audio/preview-record-audio}] :component record-audio/preview-record-audio}]
:switcher [{:name :switcher-cards :switcher [{:name :switcher-cards
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component switcher-cards/preview-switcher-cards}] :component switcher-cards/preview-switcher-cards}]
:selectors [{:name :disclaimer :selectors [{:name :disclaimer
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component disclaimer/preview-disclaimer} :component disclaimer/preview-disclaimer}
{:name :filter {:name :filter
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component filter/preview} :component filter/preview}
{:name :selectors {:name :selectors
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component selectors/preview-selectors} :component selectors/preview-selectors}
{:name :select-reactions {:name :select-reactions
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component selector-reactions/preview}] :component selector-reactions/preview}]
:settings [{:name :privacy-option :settings [{:name :privacy-option
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component privacy-option/preview-options} :component privacy-option/preview-options}
{:name :accounts {:name :accounts
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component accounts/preview-accounts} :component accounts/preview-accounts}
{:name :settings-list {:name :settings-list
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component settings-list/preview-settings-list} :component settings-list/preview-settings-list}
{:name :reorder-item {:name :reorder-item
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component reorder-item/preview-reorder-item}] :component reorder-item/preview-reorder-item}]
:share [{:name :qr-code :share [{:name :qr-code
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component qr-code/preview-qr-code} :component qr-code/preview-qr-code}
{:name :share-qr-code {:name :share-qr-code
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component share-qr-code/preview-share-qr-code}] :component share-qr-code/preview-share-qr-code}]
:tabs [{:name :segmented :tabs [{:name :segmented
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component segmented/preview-segmented} :component segmented/preview-segmented}
{:name :tabs {:name :tabs
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component tabs/preview-tabs} :component tabs/preview-tabs}
{:name :account-selector {:name :account-selector
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component account-selector/preview-this}] :component account-selector/preview-this}]
:tags [{:name :context-tags :tags [{:name :context-tags
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component context-tags/preview-context-tags} :component context-tags/preview-context-tags}
{:name :tags {:name :tags
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component tags/preview-tags} :component tags/preview-tags}
{:name :permission-tag {:name :permission-tag
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component permission-tag/preview-permission-tag} :component permission-tag/preview-permission-tag}
{:name :status-tags {:name :status-tags
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component status-tags/preview-status-tags} :component status-tags/preview-status-tags}
{:name :token-tag {:name :token-tag
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component token-tag/preview-token-tag}] :component token-tag/preview-token-tag}]
:text-combinations [{:name :title :text-combinations [{:name :title
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component title/preview-title}] :component title/preview-title}]
:wallet [{:name :lowest-price :wallet [{:name :lowest-price
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component lowest-price/preview-lowest-price} :component lowest-price/preview-lowest-price}
{:name :token-overview {:name :token-overview
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component token-overview/preview-token-overview} :component token-overview/preview-token-overview}
{:name :network-breakdown {:name :network-breakdown
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component network-breakdown/preview-network-breakdown} :component network-breakdown/preview-network-breakdown}
{:name :network-amount {:name :network-amount
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component network-amount/preview}] :component network-amount/preview}]
:keycard [{:name :keycard-component :keycard [{:name :keycard-component
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component keycard/preview-keycard}]}) :component keycard/preview-keycard}]})
(def screens (flatten (map val screens-categories))) (def screens (flatten (map val screens-categories)))

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]])