Merge pull request #875 from Stremio/feat/calendar-item-placeholder

Calendar: Implement Item placeholder

src/routes/Calendar/List/Item/Item.less

@@ -82,6 +82,46 @@
         }
     }
 
+    &.placeholder {
+        opacity: 0.7;
+        pointer-events: none;
+
+        .text {
+            width: 8rem;
+            height: 1.2rem;
+            background-color: var(--overlay-color);
+            border-radius: 0.2rem;
+        }
+
+        .video {
+            flex: none;
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+            height: 3rem;
+            padding: 0 1rem;
+
+            .name {
+                flex: auto;
+                width: 12rem;
+                height: 1.2rem;
+                background-color: var(--overlay-color);
+                border-radius: 0.2rem;
+            }
+
+            .info {
+                flex: none;
+                width: 4rem;
+                height: 1.2rem;
+                background-color: var(--overlay-color);
+                border-radius: 0.2rem;
+            }
+        }
+    }
+
     &.today {
         .heading {
             background-color: var(--primary-accent-color);

src/routes/Calendar/List/Item/ItemPlaceholder.tsx

@@ -0,0 +1,23 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Item.less';
+
+const ItemPlaceholder = () => {
+    return (
+        <div className={classNames(styles['item'], styles['placeholder'])}>
+            <div className={styles['heading']}>
+                <div className={styles['text']} />
+            </div>
+            <div className={styles['body']}>
+                <div className={styles['video']}>
+                    <div className={styles['name']} />
+                    <div className={styles['info']} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ItemPlaceholder;

src/routes/Calendar/List/Item/index.ts

@@ -1,5 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import Item from './Item';
+import ItemPlaceholder from './ItemPlaceholder';
 
-export default Item;
+export { Item, ItemPlaceholder };

src/routes/Calendar/List/List.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React, { useMemo } from 'react';
-import Item from './Item';
+import { Item, ItemPlaceholder } from './Item';
 import styles from './List.less';
 
 type Props = {
@@ -20,16 +20,21 @@ const List = ({ items, selected, monthInfo, profile, onChange }: Props) => {
     return (
         <div className={styles['list']}>
             {
-                filteredItems.map((item) => (
+                items.length === 0 ?
-                    <Item
+                    [1, 2, 3].map((index) => (
-                        key={item.date.day}
+                        <ItemPlaceholder key={index} />
-                        {...item}
+                    ))
-                        selected={selected}
+                    :
-                        monthInfo={monthInfo}
+                    filteredItems.map((item) => (
-                        profile={profile}
+                        <Item
-                        onClick={onChange}
+                            key={item.date.day}
-                    />
+                            {...item}
-                ))
+                            selected={selected}
+                            monthInfo={monthInfo}
+                            profile={profile}
+                            onClick={onChange}
+                        />
+                    ))
             }
         </div>
     );