Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Show catalog names while loading

Browse source
This commit is contained in:
Ivelin Megdanov 2025-02-26 12:05:17 +02:00
parent 8fb09b0026
commit 7220635d79
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/Search/Search.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const debounce = require('lodash.debounce'); const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next'); const useTranslate = require('stremio/common/useTranslate');
const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Icon } = require('@stremio/stremio-icons/react');
const { withCoreSuspender, getVisibleChildrenRange } = require('stremio/common'); const { withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const { Image, MainNavBars, MetaItem, MetaRow } = require('stremio/components'); const { Image, MainNavBars, MetaItem, MetaRow } = require('stremio/components');
@ -14,7 +14,7 @@ const styles = require('./styles');
const THRESHOLD = 100; const THRESHOLD = 100;
const Search = ({ queryParams }) => { const Search = ({ queryParams }) => {
const { t } = useTranslation(); const t = useTranslate();
const [search, loadSearchRows] = useSearch(queryParams); const [search, loadSearchRows] = useSearch(queryParams);
const query = React.useMemo(() => { const query = React.useMemo(() => {
return search.selected !== null ? return search.selected !== null ?
@ -52,24 +52,24 @@ const Search = ({ queryParams }) => {
query === null ? query === null ?
<div className={classnames(styles['search-hints-wrapper'])}> <div className={classnames(styles['search-hints-wrapper'])}>
<div className={classnames(styles['search-hints-title-container'], 'animation-fade-in')}> <div className={classnames(styles['search-hints-title-container'], 'animation-fade-in')}>
<div className={styles['search-hints-title']}>{t('SEARCH_ANYTHING')}</div> <div className={styles['search-hints-title']}>{t.string('SEARCH_ANYTHING')}</div>
</div> </div>
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}> <div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'trailer'} /> <Icon className={styles['icon']} name={'trailer'} />
<div className={styles['label']}>{t('SEARCH_CATEGORIES')}</div> <div className={styles['label']}>{t.string('SEARCH_CATEGORIES')}</div>
</div> </div>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'actors'} /> <Icon className={styles['icon']} name={'actors'} />
<div className={styles['label']}>{t('SEARCH_PERSONS')}</div> <div className={styles['label']}>{t.string('SEARCH_PERSONS')}</div>
</div> </div>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'link'} /> <Icon className={styles['icon']} name={'link'} />
<div className={styles['label']}>{t('SEARCH_PROTOCOLS')}</div> <div className={styles['label']}>{t.string('SEARCH_PROTOCOLS')}</div>
</div> </div>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'imdb-outline'} /> <Icon className={styles['icon']} name={'imdb-outline'} />
<div className={styles['label']}>{t('SEARCH_TYPES')}</div> <div className={styles['label']}>{t.string('SEARCH_TYPES')}</div>
</div> </div>
</div> </div>
</div> </div>
@ -81,7 +81,7 @@ const Search = ({ queryParams }) => {
src={require('/images/empty.png')} src={require('/images/empty.png')}
alt={' '} alt={' '}
/> />
<div className={styles['message-label']}>{ t('STREMIO_TV_SEARCH_NO_ADDONS') }</div> <div className={styles['message-label']}>{ t.string('STREMIO_TV_SEARCH_NO_ADDONS') }</div>
</div> </div>
: :
search.catalogs.map((catalog, index) => { search.catalogs.map((catalog, index) => {
@ -110,11 +110,13 @@ const Search = ({ queryParams }) => {
return null; return null;
} }
default: { default: {
const loadingTitle = `${catalog.addon.manifest.name}: ${t.catalogTitle(catalog)}`;
return ( return (
<MetaRow.Placeholder <MetaRow.Placeholder
key={index} key={index}
className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')} className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')}
catalog={catalog} catalog={catalog}
title={loadingTitle}
/> />
); );
} }