Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MetaItem placeholders added to discover

Browse source
This commit is contained in:
nklhrstv 2020-03-27 10:41:29 +02:00
parent 6d67840ade
commit 3fe180ff39
2 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/routes/Discover/Discover.js
View file

@ -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}

23
src/routes/Discover/styles.less
View file

@ -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 {