From 3fe180ff398b14c29c362464edcd75800749199f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 27 Mar 2020 10:41:29 +0200
Subject: [PATCH] MetaItem placeholders added to discover

---
 src/routes/Discover/Discover.js | 15 +++++++++++----
 src/routes/Discover/styles.less | 23 +++++++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index a9f044c1c..e2f9e7641 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, CONSTANTS, useBinaryState } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -122,15 +122,22 @@ const Discover = ({ urlParams, queryParams }) => {
                                     </div>
                                     :
                                     discover.catalog_resource.content.type === 'Loading' ?
-                                        <div className={styles['message-container']}>
-                                            Loading
+                                        <div className={styles['meta-items-container']}>
+                                            {Array(CONSTANTS.CATALOG_PAGE_SIZE).fill(null).map((_, index) => (
+                                                <div key={index} className={styles['meta-item-placeholder']}>
+                                                    <div className={styles['poster-container']} />
+                                                    <div className={styles['title-bar-container']}>
+                                                        <div className={styles['title-label']} />
+                                                    </div>
+                                                </div>
+                                            ))}
                                         </div>
                                         :
                                         <div className={styles['meta-items-container']} onFocusCapture={metaItemsOnFocusCapture}>
                                             {discover.catalog_resource.content.content.map((metaItem, index) => (
                                                 <MetaItem
                                                     key={index}
-                                                    className={classnames(styles['meta-item'], { 'selected': selectedMetaItem === metaItem })}
+                                                    className={classnames({ 'selected': selectedMetaItem === metaItem })}
                                                     type={metaItem.type}
                                                     name={metaItem.name}
                                                     poster={metaItem.poster}
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index bc1778396..2edb519cf 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -154,6 +154,29 @@
                 margin-right: 1.5rem;
                 padding: 0 1.5rem;
                 overflow-y: auto;
+
+                .meta-item-placeholder {
+                    padding: 1rem;
+
+                    .poster-container {
+                        padding-bottom: calc(100% * var(--poster-shape-ratio));
+                        background-color: var(--color-placeholder-background);
+                    }
+
+                    .title-bar-container {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        height: 2.8rem;
+
+                        .title-label {
+                            flex: none;
+                            width: 60%;
+                            height: 1.2rem;
+                            background-color: var(--color-placeholder-background);
+                        }
+                    }
+                }
             }
 
             .message-container {