diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js index 3a17e2a7c..ae7d2416e 100644 --- a/src/routes/MetaDetails/StreamsList/StreamsList.js +++ b/src/routes/MetaDetails/StreamsList/StreamsList.js @@ -22,10 +22,9 @@ const StreamsList = ({ className, video, ...props }) => { const backButtonOnClick = React.useCallback(() => { window.history.back(); }, []); - const countLoadingStreams = () => { + const countLoadingAddons = React.useMemo(() => { return props.streams.filter((stream) => stream.content.type === 'Loading').length; - }; - const loadingAddonsCount = countLoadingStreams(); + }, [props.streams]); const streamsByAddon = React.useMemo(() => { return props.streams .filter((streams) => streams.content.type === 'Ready') @@ -100,10 +99,10 @@ const StreamsList = ({ className, video, ...props }) => { : { - loadingAddonsCount > 0 ? + countLoadingAddons > 0 ?
- {loadingAddonsCount} {t('MOBILE_ADDONS_LOADING')} + {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index b935ec82f..55be6310b 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -63,6 +63,7 @@ background-color: var(--primary-accent-color); } } + .select-choices-wrapper { display: flex; align-items: center;