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

Merge pull request #1176 from Stremio/fix/streams-list-loading-layout-shift

Browse source 
fix: move streams loading indicator below list to prevent layout shift
This commit is contained in:
Timothy Z. 2026-03-27 15:32:58 +02:00 committed by GitHub
commit f2023c5a5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -170,17 +170,6 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
</div>
:
<React.Fragment>
{
countLoadingAddons > 0 ?
<div className={styles['addons-loading-container']}>
<div className={styles['addons-loading']}>
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
</div>
<span className={styles['addons-loading-bar']}></span>
</div>
:
null
}
<div className={styles['streams-container']} ref={streamsContainerRef}>
{filteredStreams.map((stream, index) => (
<Stream
@ -206,6 +195,17 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
null
}
</div>
{
countLoadingAddons > 0 ?
<div className={styles['addons-loading-container']}>
<div className={styles['addons-loading']}>
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
</div>
<span className={styles['addons-loading-bar']}></span>
</div>
:
null
}
</React.Fragment>
}
</div>

11
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -50,11 +50,12 @@
display: flex;
z-index: 1;
overflow: visible;
margin: 2em 1em 0 1em;
margin: 2em;
gap: 1em;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: var(--border-radius) var(--border-radius) 0 0;
.addons-loading {
color: var(--primary-foreground-color);
@ -198,5 +199,13 @@
background-color: transparent;
}
}
.addons-loading-container {
position: sticky;
bottom: 0;
margin: 0;
padding: 1em;
background-color: var(--primary-background-color);
}
}
}