From b2a8a19f28defffa8dde5e587f4fbdec2c6100d9 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:38:22 +0200
Subject: [PATCH] feature: loading addons message added

---
 .../MetaDetails/StreamsList/StreamsList.js    | 18 +++++++++++++--
 .../MetaDetails/StreamsList/styles.less       | 22 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 1a24a5eda..32a739bc2 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -9,7 +9,6 @@ const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
-
 const ALL_ADDONS_KEY = 'ALL';
 
 const StreamsList = ({ className, video, ...props }) => {
@@ -22,6 +21,10 @@ const StreamsList = ({ className, video, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
+    const countLoadingStreams = () => {
+        return props.streams.filter((stream) => stream.content.type === 'Loading').length;
+    };
+    const loadingAddonsCount = countLoadingStreams();
     const streamsByAddon = React.useMemo(() => {
         return props.streams
             .filter((streams) => streams.content.type === 'Ready')
@@ -95,6 +98,17 @@ const StreamsList = ({ className, video, ...props }) => {
                             </div>
                             :
                             <React.Fragment>
+                                {
+                                    loadingAddonsCount > 0 ?
+                                        <div className={styles['addons-loading-container']}>
+                                            <div className={styles['addons-loading']}>
+                                                {loadingAddonsCount} {t('MOBILE_ADDONS_LOADING')}
+                                            </div>
+                                            <span className={styles['addons-loading-bar']}></span>
+                                        </div>
+                                        :
+                                        null
+                                }
                                 <div className={styles['select-choices-wrapper']}>
                                     {
                                         video ?
@@ -148,7 +162,7 @@ const StreamsList = ({ className, video, ...props }) => {
 StreamsList.propTypes = {
     className: PropTypes.string,
     streams: PropTypes.arrayOf(PropTypes.object).isRequired,
-    video: PropTypes.object
+    video: PropTypes.object,
 };
 
 module.exports = StreamsList;
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index c35fefb52..b935ec82f 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -41,6 +41,28 @@
         }
     }
 
+    .addons-loading-container {
+        display: flex;
+        z-index: 1;
+        overflow: visible;
+        margin: 2em 1em 0 1em;
+        gap: 1em;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .addons-loading {
+            color: var(--primary-foreground-color);
+            font-size: 1rem;
+        }
+
+        .addons-loading-bar {
+            width: 90%;
+            height: 0.3em;
+            border-radius: var(--border-radius);
+            background-color: var(--primary-accent-color);
+        }
+    }
     .select-choices-wrapper {
         display: flex;
         align-items: center;