diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
index b2d4f9d3c..067c3fd15 100644
--- a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
@@ -3,46 +3,67 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Notification = require('./Notification');
-const useMetaItems = require('./useMetaItems');
+const NotificationPlaceholder = require('./NotificationPlaceholder');
 const styles = require('./styles');
 
 const NotificationsList = ({ className, metaItems }) => {
-    const notifications = useMetaItems(metaItems);
     return (
         <div className={classnames(className, styles['notifications-list-scroll-container'])}>
             {
-                notifications.length > 0 ?
-                    notifications.map((notification) => (
-                        notification.videos.length === 1 ?
-                            <Notification
-                                {...notification}
-                                key={notification.id}
-                                posterThumbnail={true}
-                                poster={notification.videos[0].poster}
-                                season={notification.videos[0].season}
-                                episode={notification.videos[0].episode}
-                                released={notification.videos[0].released}
-                                className={styles['notification']}
-                            />
-                            :
-                            <Notification
-                                {...notification}
-                                key={notification.id}
-                                posterThumbnail={false}
-                                name={notification.videos.length + ' new videos for ' + notification.name}
-                                released={notification.videos[notification.videos.length - 1].released}
-                                className={styles['notification']}
-                            />
-                    ))
-                    :
-                    <React.Fragment>
-                        <div className={styles['no-notifications-container']}>
-                            <Icon className={styles['icon']} icon={'ic_bell'} />
-                            <div className={styles['label']}>
-                                No new notifications
-                            </div>
-                        </div>
-                    </React.Fragment>
+                metaItems.map(({ req, content }, index) => {
+                    switch (content.type) {
+                        case 'Ready':
+                            return (
+                                content.content.length > 0 ?
+                                    content.content.map((notification) => {
+                                        //notifications videos are not available in useCatalogs, but in useNotifications hook
+                                        notification.videos = notification.videos || [{
+                                            thumbnail: 'https://www.stremio.com/website/home-testimonials.jpg',
+                                            season: 1,
+                                            episode: 1,
+                                            released: new Date()
+                                        }];
+
+                                        return (
+                                            notification.videos.length === 1 ?
+                                                <Notification
+                                                    {...notification}
+                                                    key={`${index}${req.base}${content.type}${notification.id}`}
+                                                    className={styles['notification']}
+                                                    posterThumbnail={true}
+                                                    thumbnail={notification.videos[0].thumbnail}
+                                                    season={notification.videos[0].season}
+                                                    episode={notification.videos[0].episode}
+                                                    released={notification.videos[0].released}
+                                                />
+                                                :
+                                                <Notification
+                                                    {...notification}
+                                                    key={`${index}${req.base}${content.type}${notification.id}`}
+                                                    className={styles['notification']}
+                                                    posterThumbnail={false}
+                                                    name={notification.videos.length + ' new videos for ' + notification.name}
+                                                    released={notification.videos[notification.videos.length - 1].released}
+                                                />
+                                        );
+                                    })
+                                    :
+                                    <React.Fragment>
+                                        <div className={styles['no-notifications-container']}>
+                                            <Icon className={styles['icon']} icon={'ic_bell'} />
+                                            <div className={styles['label']}>No new notifications</div>
+                                        </div>
+                                    </React.Fragment>
+                            );
+                        case 'Loading':
+                            return (
+                                <NotificationPlaceholder
+                                    key={`${index}${req.base}${content.type}`}
+                                    className={styles['notification']}
+                                />
+                            );
+                    }
+                })
             }
         </div>
     );
@@ -50,7 +71,7 @@ const NotificationsList = ({ className, metaItems }) => {
 
 NotificationsList.propTypes = {
     className: PropTypes.string,
-    metaItems: PropTypes.object
+    metaItems: PropTypes.arrayOf(PropTypes.object)
 };
 
 module.exports = NotificationsList;