From affd2a5e762cafe04c8b940d2de7b90e2f5f3df0 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Tue, 4 Jul 2023 16:55:22 +0530 Subject: [PATCH] Implement static loading skeleton (#16474) --- .../loaders/skeleton/constants.cljs | 95 +++ .../components/loaders/skeleton/style.cljs | 29 + .../components/loaders/skeleton/view.cljs | 46 ++ src/quo2/core.cljs | 6 +- .../quo_preview/loaders/skeleton.cljs | 43 ++ src/status_im2/contexts/quo_preview/main.cljs | 558 +++++++++--------- .../messages_skeleton.cljs | 13 - 7 files changed, 497 insertions(+), 293 deletions(-) create mode 100644 src/quo2/components/loaders/skeleton/constants.cljs create mode 100644 src/quo2/components/loaders/skeleton/style.cljs create mode 100644 src/quo2/components/loaders/skeleton/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/loaders/skeleton.cljs delete mode 100644 src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs diff --git a/src/quo2/components/loaders/skeleton/constants.cljs b/src/quo2/components/loaders/skeleton/constants.cljs new file mode 100644 index 0000000000..0fb3133017 --- /dev/null +++ b/src/quo2/components/loaders/skeleton/constants.cljs @@ -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}}}}) diff --git a/src/quo2/components/loaders/skeleton/style.cljs b/src/quo2/components/loaders/skeleton/style.cljs new file mode 100644 index 0000000000..b0a17b3064 --- /dev/null +++ b/src/quo2/components/loaders/skeleton/style.cljs @@ -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})) diff --git a/src/quo2/components/loaders/skeleton/view.cljs b/src/quo2/components/loaders/skeleton/view.cljs new file mode 100644 index 0000000000..f8abdef727 --- /dev/null +++ b/src/quo2/components/loaders/skeleton/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 402f9dcb6c..d67f592063 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/contexts/quo_preview/loaders/skeleton.cljs b/src/status_im2/contexts/quo_preview/loaders/skeleton.cljs new file mode 100644 index 0000000000..59e82d8d09 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/loaders/skeleton.cljs @@ -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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0f0e5fc5bc..1046e21b33 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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] [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,287 +97,288 @@ [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 - {:foundations [{:name :shadows - :options {:topBar {:visible true}} - :component shadows/preview-shadows}] - :animated-list [{:name :animated-header-list - :options {:topBar {:visible false}} - :component animated-header-list/mock-screen}] - :avatar [{:name :group-avatar - :options {:topBar {:visible true}} - :component group-avatar/preview-group-avatar} - {:name :icon-avatar - :options {:topBar {:visible true}} - :component icon-avatar/preview-icon-avatar} - {:name :user-avatar - :options {:topBar {:visible true}} - :component user-avatar/preview-user-avatar} - {:name :wallet-user-avatar - :options {:topBar {:visible true}} - :component wallet-user-avatar/preview-wallet-user-avatar} - {:name :channel-avatar - :options {:topBar {:visible true}} - :component channel-avatar/preview-channel-avatar} - {:name :account-avatar - :options {:topBar {:visible true}} - :component account-avatar/preview-account-avatar}] - :banner [{:name :banner - :options {:topBar {:visible true}} - :component banner/preview-banner}] - :buttons [{:name :button - :options {:topBar {:visible true}} - :component button/preview-button} - {:name :dynamic-button - :options {:topBar {:visible true}} - :component dynamic-button/preview-dynamic-button} - {:name :slide-button - :options {:topBar {:visible true}} - :component slide-button/preview-slide-button} - {:name :predictive-keyboard - :options {:topBar {:visible true}} - :component predictive-keyboard/preview-predictive-keyboard}] - :code [{:name :snippet - :options {:topBar {:visible true}} - :component code-snippet/preview-code-snippet}] - :colors [{:name :color-picker - :options {:topBar {:visible true}} - :component color-picker/preview-color-picker}] - :community [{:name :community-card-view - :options {:topBar {:visible true}} - :component community-card/preview-community-card} - {:name :community-list-view - :options {:topBar {:visible true}} - :component community-list-view/preview-community-list-view} - {:name :community-membership-list-view - :options {:topBar {:visible true}} - :component community-membership-list-view/preview-community-list-view} - {:name :discover-card - :options {:topBar {:visible true}} - :component discover-card/preview-discoverd-card} - {:name :token-gating - :options {:insets {:bottom? true} - :topBar {:visible true}} - :component token-gating/preview-token-gating} - {:name :channel-actions - :options {:insets {:bottom? true} - :topBar {:visible true}} - :component channel-actions/preview-channel-actions}] - :counter [{:name :counter - :options {:topBar {:visible true}} - :component counter/preview-counter} - {:name :step - :options {:topBar {:visible true}} - :component step/preview-step}] - :dividers [{:name :divider-label - :options {:topBar {:visible true}} - :component divider-label/preview-divider-label} - {:name :new-messages - :options {:topBar {:visible true}} - :component new-messages/preview-new-messages} - {:name :divider-date - :options {:topBar {:visible true}} - :component divider-date/preview-divider-date} - {:name :strength-divider - :options {:topBar {:visible true}} - :component strength-divider/preview-strength-divider}] - :drawers [{:name :action-drawers - :options {:topBar {:visible true}} - :component action-drawers/preview-action-drawers} - {:name :documentation-drawer - :insets {:top false} - :component documenation-drawers/preview-documenation-drawers} - {:name :drawer-buttons - :options {:topBar {:visible true}} - :component drawer-buttons/preview-drawer-buttons} - {:name :permission-drawers - :options {:topBar {:visible true}} - :component permission-drawers/preview-permission-drawers}] - :dropdowns [{:name :dropdown - :options {:topBar {:visible true}} - :component dropdown/preview-dropdown}] - :empty-state [{:name :empty-state - :options {:topBar {:visible true}} - :component empty-state/preview-empty-state}] - :info [{:name :info-message - :options {:topBar {:visible true}} - :component info-message/preview-info-message} - {:name :information-box - :options {:topBar {:visible true}} - :component information-box/preview-information-box}] - :inputs [{:name :input - :options {:topBar {:visible true}} - :component input/preview-input} - {:name :profile-input - :options {:topBar {:visible true}} - :component profile-input/preview-profile-input} - {:name :recovery-phrase-input - :options {:topBar {:visible true}} - :component recovery-phrase-input/preview-recovery-phrase-input} - {:name :search-input - :options {:topBar {:visible true}} - :component search-input/preview-search-input} - {:name :title-input - :options {:topBar {:visible true}} - :component title-input/preview-title-input}] - :links [{:name :url-preview - :options {:insets {:top? true} - :topBar {:visible true}} - :component url-preview/preview} - {:name :url-preview-list - :options {:insets {:top? true} - :topBar {:visible true}} - :component url-preview-list/preview} - {:name :link-preview - :options {:insets {:top? true} - :topBar {:visible true}} - :component link-preview/preview}] - :list-items [{:name :channel - :options {:topBar {:visible true}} - :component channel/preview-channel} - {:name :preview-lists - :options {:topBar {:visible true}} - :component preview-lists/preview-preview-lists} - {:name :user-list - :options {:topBar {:visible true}} - :component user-list/preview-user-list}] - :markdown [{:name :texts - :options {:topBar {:visible true}} - :component text/preview-text} - {:name :markdown-list - :options {:topBar {:visible true}} - :component markdown-list/preview-markdown-list}] - :messages [{:name :gap - :options {:topBar {:visible true}} - :component messages-gap/preview-messages-gap} - {:name :system-messages - :options {:topBar {:visible true}} - :component system-message/preview-system-message} - {:name :author - :options {:topBar {:visible true}} - :component messages-author/preview-author}] - :navigation [{:name :bottom-nav-tab - :options {:topBar {:visible true}} - :component bottom-nav-tab/preview-bottom-nav-tab} - {:name :top-nav - :options {:topBar {:visible true}} - :component top-nav/preview-top-nav} - {:name :page-nav - :options {:topBar {:visible true}} - :component page-nav/preview-page-nav} - {:name :floating-shell-button - :options {:topBar {:visible true}} - :component floating-shell-button/preview-floating-shell-button}] - :notifications [{:name :activity-logs - :options {:topBar {:visible true}} - :component activity-logs/preview-activity-logs} - {:name :toast - :options {:topBar {:visible true}} - :component toast/preview-toasts} - {:name :notification - :options {:topBar {:visible true}} - :component notification/preview-notification}] - :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}] - :profile [{:name :profile-card - :options {:topBar {:visible true}} - :component profile-card/preview-profile-card} - {:name :collectible - :options {:topBar {:visible true}} - :component collectible/preview-collectible} - {:name :select-profile - :options {:topBar {:visible true}} - :component select-profile/preview-select-profile}] - :reactions [{:name :react - :options {:topBar {:visible true}} - :component react/preview-react}] - :record-audio [{:name :record-audio - :options {:topBar {:visible true}} - :component record-audio/preview-record-audio}] - :switcher [{:name :switcher-cards - :options {:topBar {:visible true}} - :component switcher-cards/preview-switcher-cards}] - :selectors [{:name :disclaimer - :options {:topBar {:visible true}} - :component disclaimer/preview-disclaimer} - {:name :filter - :options {:topBar {:visible true}} - :component filter/preview} - {:name :selectors - :options {:topBar {:visible true}} - :component selectors/preview-selectors} - {:name :select-reactions - :options {:topBar {:visible true}} - :component selector-reactions/preview}] - :settings [{:name :privacy-option - :options {:topBar {:visible true}} - :component privacy-option/preview-options} - {:name :accounts - :options {:topBar {:visible true}} - :component accounts/preview-accounts} - {:name :settings-list - :options {:topBar {:visible true}} - :component settings-list/preview-settings-list} - {:name :reorder-item - :options {:topBar {:visible true}} - :component reorder-item/preview-reorder-item}] - :share [{:name :qr-code - :options {:topBar {:visible true}} - :component qr-code/preview-qr-code} - {:name :share-qr-code - :options {:topBar {:visible true}} - :component share-qr-code/preview-share-qr-code}] - :tabs [{:name :segmented - :options {:topBar {:visible true}} - :component segmented/preview-segmented} - {:name :tabs - :options {:topBar {:visible true}} - :component tabs/preview-tabs} - {:name :account-selector - :options {:topBar {:visible true}} - :component account-selector/preview-this}] - :tags [{:name :context-tags - :options {:topBar {:visible true}} - :component context-tags/preview-context-tags} - {:name :tags - :options {:topBar {:visible true}} - :component tags/preview-tags} - {:name :permission-tag - :options {:topBar {:visible true}} - :component permission-tag/preview-permission-tag} - {:name :status-tags - :options {:topBar {:visible true}} - :component status-tags/preview-status-tags} - {:name :token-tag - :options {:topBar {:visible true}} - :component token-tag/preview-token-tag}] - :text-combinations [{:name :title - :options {:topBar {:visible true}} - :component title/preview-title}] - :wallet [{:name :lowest-price - :options {:topBar {:visible true}} - :component lowest-price/preview-lowest-price} - {:name :token-overview - :options {:topBar {:visible true}} - :component token-overview/preview-token-overview} - {:name :network-breakdown - :options {:topBar {:visible true}} - :component network-breakdown/preview-network-breakdown} - {:name :network-amount - :options {:topBar {:visible true}} - :component network-amount/preview}] - :keycard [{:name :keycard-component - :options {:topBar {:visible true}} - :component keycard/preview-keycard}]}) + {:foundations [{:name :shadows + :options {:topBar {:visible true}} + :component shadows/preview-shadows}] + :animated-list [{:name :animated-header-list + :options {:topBar {:visible false}} + :component animated-header-list/mock-screen}] + :avatar [{:name :group-avatar + :options {:topBar {:visible true}} + :component group-avatar/preview-group-avatar} + {:name :icon-avatar + :options {:topBar {:visible true}} + :component icon-avatar/preview-icon-avatar} + {:name :user-avatar + :options {:topBar {:visible true}} + :component user-avatar/preview-user-avatar} + {:name :wallet-user-avatar + :options {:topBar {:visible true}} + :component wallet-user-avatar/preview-wallet-user-avatar} + {:name :channel-avatar + :options {:topBar {:visible true}} + :component channel-avatar/preview-channel-avatar} + {:name :account-avatar + :options {:topBar {:visible true}} + :component account-avatar/preview-account-avatar}] + :banner [{:name :banner + :options {:topBar {:visible true}} + :component banner/preview-banner}] + :buttons [{:name :button + :options {:topBar {:visible true}} + :component button/preview-button} + {:name :dynamic-button + :options {:topBar {:visible true}} + :component dynamic-button/preview-dynamic-button} + {:name :slide-button + :options {:topBar {:visible true}} + :component slide-button/preview-slide-button} + {:name :predictive-keyboard + :options {:topBar {:visible true}} + :component predictive-keyboard/preview-predictive-keyboard}] + :code [{:name :snippet + :options {:topBar {:visible true}} + :component code-snippet/preview-code-snippet}] + :colors [{:name :color-picker + :options {:topBar {:visible true}} + :component color-picker/preview-color-picker}] + :community [{:name :community-card-view + :options {:topBar {:visible true}} + :component community-card/preview-community-card} + {:name :community-list-view + :options {:topBar {:visible true}} + :component community-list-view/preview-community-list-view} + {:name :community-membership-list-view + :options {:topBar {:visible true}} + :component community-membership-list-view/preview-community-list-view} + {:name :discover-card + :options {:topBar {:visible true}} + :component discover-card/preview-discoverd-card} + {:name :token-gating + :options {:insets {:bottom? true} + :topBar {:visible true}} + :component token-gating/preview-token-gating} + {:name :channel-actions + :options {:insets {:bottom? true} + :topBar {:visible true}} + :component channel-actions/preview-channel-actions}] + :counter [{:name :counter + :options {:topBar {:visible true}} + :component counter/preview-counter} + {:name :step + :options {:topBar {:visible true}} + :component step/preview-step}] + :dividers [{:name :divider-label + :options {:topBar {:visible true}} + :component divider-label/preview-divider-label} + {:name :new-messages + :options {:topBar {:visible true}} + :component new-messages/preview-new-messages} + {:name :divider-date + :options {:topBar {:visible true}} + :component divider-date/preview-divider-date} + {:name :strength-divider + :options {:topBar {:visible true}} + :component strength-divider/preview-strength-divider}] + :drawers [{:name :action-drawers + :options {:topBar {:visible true}} + :component action-drawers/preview-action-drawers} + {:name :documentation-drawer + :insets {:top false} + :component documenation-drawers/preview-documenation-drawers} + {:name :drawer-buttons + :options {:topBar {:visible true}} + :component drawer-buttons/preview-drawer-buttons} + {:name :permission-drawers + :options {:topBar {:visible true}} + :component permission-drawers/preview-permission-drawers}] + :dropdowns [{:name :dropdown + :options {:topBar {:visible true}} + :component dropdown/preview-dropdown}] + :empty-state [{:name :empty-state + :options {:topBar {:visible true}} + :component empty-state/preview-empty-state}] + :info [{:name :info-message + :options {:topBar {:visible true}} + :component info-message/preview-info-message} + {:name :information-box + :options {:topBar {:visible true}} + :component information-box/preview-information-box}] + :inputs [{:name :input + :options {:topBar {:visible true}} + :component input/preview-input} + {:name :profile-input + :options {:topBar {:visible true}} + :component profile-input/preview-profile-input} + {:name :recovery-phrase-input + :options {:topBar {:visible true}} + :component recovery-phrase-input/preview-recovery-phrase-input} + {:name :search-input + :options {:topBar {:visible true}} + :component search-input/preview-search-input} + {:name :title-input + :options {:topBar {:visible true}} + :component title-input/preview-title-input}] + :links [{:name :url-preview + :options {:insets {:top? true} + :topBar {:visible true}} + :component url-preview/preview} + {:name :url-preview-list + :options {:insets {:top? true} + :topBar {:visible true}} + :component url-preview-list/preview} + {:name :link-preview + :options {:insets {:top? true} + :topBar {:visible true}} + :component link-preview/preview}] + :list-items [{:name :channel + :options {:topBar {:visible true}} + :component channel/preview-channel} + {:name :preview-lists + :options {:topBar {:visible true}} + :component preview-lists/preview-preview-lists} + {: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} + {:name :markdown-list + :options {:topBar {:visible true}} + :component markdown-list/preview-markdown-list}] + :messages [{:name :gap + :options {:topBar {:visible true}} + :component messages-gap/preview-messages-gap} + {:name :system-messages + :options {:topBar {:visible true}} + :component system-message/preview-system-message} + {:name :author + :options {:topBar {:visible true}} + :component messages-author/preview-author}] + :navigation [{:name :bottom-nav-tab + :options {:topBar {:visible true}} + :component bottom-nav-tab/preview-bottom-nav-tab} + {:name :top-nav + :options {:topBar {:visible true}} + :component top-nav/preview-top-nav} + {:name :page-nav + :options {:topBar {:visible true}} + :component page-nav/preview-page-nav} + {:name :floating-shell-button + :options {:topBar {:visible true}} + :component floating-shell-button/preview-floating-shell-button}] + :notifications [{:name :activity-logs + :options {:topBar {:visible true}} + :component activity-logs/preview-activity-logs} + {:name :toast + :options {:topBar {:visible true}} + :component toast/preview-toasts} + {:name :notification + :options {:topBar {:visible true}} + :component notification/preview-notification}] + :onboarding [{:name :small-option-card + :options {:topBar {:visible true}} + :component small-option-card/preview-small-option-card}] + :password [{:name :tips + :options {:topBar {:visible true}} + :component tips/preview-tips}] + :profile [{:name :profile-card + :options {:topBar {:visible true}} + :component profile-card/preview-profile-card} + {:name :collectible + :options {:topBar {:visible true}} + :component collectible/preview-collectible} + {:name :select-profile + :options {:topBar {:visible true}} + :component select-profile/preview-select-profile}] + :reactions [{:name :react + :options {:topBar {:visible true}} + :component react/preview-react}] + :record-audio [{:name :record-audio + :options {:topBar {:visible true}} + :component record-audio/preview-record-audio}] + :switcher [{:name :switcher-cards + :options {:topBar {:visible true}} + :component switcher-cards/preview-switcher-cards}] + :selectors [{:name :disclaimer + :options {:topBar {:visible true}} + :component disclaimer/preview-disclaimer} + {:name :filter + :options {:topBar {:visible true}} + :component filter/preview} + {:name :selectors + :options {:topBar {:visible true}} + :component selectors/preview-selectors} + {:name :select-reactions + :options {:topBar {:visible true}} + :component selector-reactions/preview}] + :settings [{:name :privacy-option + :options {:topBar {:visible true}} + :component privacy-option/preview-options} + {:name :accounts + :options {:topBar {:visible true}} + :component accounts/preview-accounts} + {:name :settings-list + :options {:topBar {:visible true}} + :component settings-list/preview-settings-list} + {:name :reorder-item + :options {:topBar {:visible true}} + :component reorder-item/preview-reorder-item}] + :share [{:name :qr-code + :options {:topBar {:visible true}} + :component qr-code/preview-qr-code} + {:name :share-qr-code + :options {:topBar {:visible true}} + :component share-qr-code/preview-share-qr-code}] + :tabs [{:name :segmented + :options {:topBar {:visible true}} + :component segmented/preview-segmented} + {:name :tabs + :options {:topBar {:visible true}} + :component tabs/preview-tabs} + {:name :account-selector + :options {:topBar {:visible true}} + :component account-selector/preview-this}] + :tags [{:name :context-tags + :options {:topBar {:visible true}} + :component context-tags/preview-context-tags} + {:name :tags + :options {:topBar {:visible true}} + :component tags/preview-tags} + {:name :permission-tag + :options {:topBar {:visible true}} + :component permission-tag/preview-permission-tag} + {:name :status-tags + :options {:topBar {:visible true}} + :component status-tags/preview-status-tags} + {:name :token-tag + :options {:topBar {:visible true}} + :component token-tag/preview-token-tag}] + :text-combinations [{:name :title + :options {:topBar {:visible true}} + :component title/preview-title}] + :wallet [{:name :lowest-price + :options {:topBar {:visible true}} + :component lowest-price/preview-lowest-price} + {:name :token-overview + :options {:topBar {:visible true}} + :component token-overview/preview-token-overview} + {:name :network-breakdown + :options {:topBar {:visible true}} + :component network-breakdown/preview-network-breakdown} + {:name :network-amount + :options {:topBar {:visible true}} + :component network-amount/preview}] + :keycard [{:name :keycard-component + :options {:topBar {:visible true}} + :component keycard/preview-keycard}]}) (def screens (flatten (map val screens-categories))) diff --git a/src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs b/src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs deleted file mode 100644 index f04948c156..0000000000 --- a/src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs +++ /dev/null @@ -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]])