diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
new file mode 100644
index 000000000..a6d3bda30
--- /dev/null
+++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
@@ -0,0 +1,30 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const styles = require('./styles');
+
+const MetaRowPlaceholder = ({ className, title, maximumItemsCount }) => {
+ maximumItemsCount = maximumItemsCount !== null && isFinite(maximumItemsCount) ? maximumItemsCount : 20;
+ return (
+
+
{title}
+
+ {Array(maximumItemsCount).fill(null).map((_, index) => (
+
+ ))}
+
+
+
+ );
+};
+
+MetaRowPlaceholder.propTypes = {
+ className: PropTypes.string,
+ title: PropTypes.string,
+ maximumItemsCount: PropTypes.number
+};
+
+module.exports = MetaRowPlaceholder;
diff --git a/src/common/MetaRowPlaceholder/index.js b/src/common/MetaRow/MetaRowPlaceholder/index.js
similarity index 100%
rename from src/common/MetaRowPlaceholder/index.js
rename to src/common/MetaRow/MetaRowPlaceholder/index.js
diff --git a/src/common/MetaRowPlaceholder/styles.less b/src/common/MetaRow/MetaRowPlaceholder/styles.less
similarity index 57%
rename from src/common/MetaRowPlaceholder/styles.less
rename to src/common/MetaRow/MetaRowPlaceholder/styles.less
index f060d73f6..8e563492c 100644
--- a/src/common/MetaRowPlaceholder/styles.less
+++ b/src/common/MetaRow/MetaRowPlaceholder/styles.less
@@ -7,13 +7,14 @@
.title-container {
grid-area: title-area;
- height: 2.4rem;
+ max-height: 2.4em;
margin-bottom: 2rem;
+ font-size: 1.5rem;
+ color: var(--color-surface);
- .title-label-container {
- width: 60%;
- height: 100%;
- background-color: var(--color-placeholder);
+ &:empty {
+ height: 1.2em;
+ background: linear-gradient(to right, var(--color-placeholder) 0 40%, transparent 40% 100%);
}
}
@@ -30,6 +31,16 @@
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
}
+
+ .title-bar-container {
+ height: 2.8rem;
+ background-color: var(--color-placeholder);
+ }
}
}
+
+ .see-all-container {
+ grid-area: see-all-area;
+ background-color: var(--color-placeholder);
+ }
}
\ No newline at end of file
diff --git a/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js
deleted file mode 100644
index ca36a5298..000000000
--- a/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const styles = require('./styles');
-
-const MetaRowPlaceholder = ({ className }) => {
- return (
-
- );
-};
-
-MetaRowPlaceholder.propTypes = {
- className: PropTypes.string
-};
-
-module.exports = MetaRowPlaceholder;
diff --git a/src/common/index.js b/src/common/index.js
index 3049744fb..e594b6b64 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,13 +1,12 @@
const Button = require('./Button');
const Checkbox = require('./Checkbox');
const ColorInput = require('./ColorInput');
-const Multiselect = require('./Multiselect');
const Image = require('./Image');
const MainNavBar = require('./MainNavBar');
const MetaPreview = require('./MetaPreview');
const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
const MetaRow = require('./MetaRow');
-const MetaRowPlaceholder = require('./MetaRowPlaceholder');
+const Multiselect = require('./Multiselect');
const NavBar = require('./NavBar');
const Popup = require('./Popup');
const ScrollEventEmitter = require('./ScrollEventEmitter');
@@ -27,13 +26,12 @@ module.exports = {
Button,
Checkbox,
ColorInput,
- Multiselect,
Image,
MainNavBar,
MetaPreview,
MetaPreviewPlaceholder,
MetaRow,
- MetaRowPlaceholder,
+ Multiselect,
NavBar,
Popup,
ScrollEventEmitter,