handle error cases in library

src/routes/Library/Library.js

@@ -5,7 +5,7 @@ const useSort = require('./useSort');
 const styles = require('./styles');
 
 const Library = ({ urlParams, queryParams }) => {
-    const [metaItems, selectTypeInput] = useLibrary(urlParams);
+    const [metaItems, selectTypeInput, error] = useLibrary(urlParams);
     const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
     return (
         <div className={styles['library-container']}>
@@ -15,15 +15,29 @@ const Library = ({ urlParams, queryParams }) => {
                     <Multiselect {...selectTypeInput} className={styles['select-input-container']} />
                     <Multiselect {...selectSortInput} className={styles['select-input-container']} />
                 </div>
-                <div className={styles['meta-items-container']}>
-                    {metaItems
-                        .sort(sortFunction)
-                        .map((metaItem, index) => (
-                            <MetaItem
-                                {...metaItem}
-                                key={index}
-                            />
-                        ))
+                <div className={styles['type-content-container']}>
+                    {
+                        error !== null ?
+                            <div className={styles['message-container']}>
+                                No items for type {urlParams.type !== (null && '') ? urlParams.type : '"Empty"'}
+                            </div>
+                            :
+                            Array.isArray(metaItems) ?
+                                <div className={styles['meta-items-container']}>
+                                    {
+                                        metaItems
+                                            .sort(sortFunction)
+                                            .map(({ removed, temp, ...metaItem }, index) => (
+                                                <MetaItem
+                                                    {...metaItem}
+                                                    key={index}
+                                                />
+                                            ))}
+                                </div>
+                                :
+                                <div className={styles['message-container']}>
+                                    Loading
+                                </div>
                     }
                 </div>
             </div>

src/routes/Library/styles.less

@@ -19,11 +19,11 @@
         grid-template-columns: 1fr auto;
         grid-template-rows: auto 1fr;
         grid-template-areas:
-            "dropdowns-area switch-view-area"
-            "meta-items-area meta-items-area";
+            "controls-area switch-view-area"
+            "type-content-area type-content-area";
 
         .controls-container {
-            grid-area: dropdowns-area;
+            grid-area: controls-area;
             display: flex;
             flex-direction: row;
             margin: 2rem;
@@ -41,14 +41,24 @@
             }
         }
 
-        .meta-items-container {
-            grid-area: meta-items-area;
-            display: grid;
-            grid-auto-rows: max-content;
-            grid-gap: 1.5rem;
-            align-items: center;
-            padding: 0 2rem;
-            overflow-y: auto;
+        .type-content-container {
+            grid-area: type-content-area;
+
+            .meta-items-container {
+                display: grid;
+                max-height: 100%;
+                grid-auto-rows: max-content;
+                grid-gap: 1.5rem;
+                align-items: center;
+                padding: 0 2rem;
+                overflow-y: auto;
+            }
+
+            .message-container {
+                padding: 0 2rem;
+                font-size: 2rem;
+                color: var(--color-surfacelighter);
+            }
         }
     }
 }

src/routes/Library/useLibrary.js

@@ -4,7 +4,7 @@ const { useServices } = require('stremio/services');
 
 const useLibrary = (urlParams) => {
     const { core } = useServices();
-    const [library, setLibrary] = React.useState([[], null]);
+    const [library, setLibrary] = React.useState([[], null, null]);
     React.useEffect(() => {
         const state = core.getState();
         const type = typeof urlParams.type === 'string' && urlParams.type.length > 0 ?
@@ -28,7 +28,8 @@ const useLibrary = (urlParams) => {
                     window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
                 }
             };
-            setLibrary([state.library.items, selectInput]);
+            const error = state.library.items === 0 ? state.library.items : null;
+            setLibrary([state.library.items, selectInput, error]);
         };
         core.on('NewModel', onNewState);
         core.dispatch({