From d1f96fcdcaaf51cdb9a2f4d000a55d8b3405d294 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 24 Mar 2025 11:44:51 +0200
Subject: [PATCH] feat(Calendar): Impl Item placeholder

---
 src/routes/Calendar/List/Item/Item.less       | 40 +++++++++++++++++++
 .../Calendar/List/Item/ItemPlaceholder.tsx    | 23 +++++++++++
 src/routes/Calendar/List/Item/index.ts        |  3 +-
 src/routes/Calendar/List/List.tsx             | 27 ++++++++-----
 4 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/Calendar/List/Item/ItemPlaceholder.tsx

diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less
index b11feda2a..0cce6c582 100644
--- a/src/routes/Calendar/List/Item/Item.less
+++ b/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);
diff --git a/src/routes/Calendar/List/Item/ItemPlaceholder.tsx b/src/routes/Calendar/List/Item/ItemPlaceholder.tsx
new file mode 100644
index 000000000..5d032e712
--- /dev/null
+++ b/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;
diff --git a/src/routes/Calendar/List/Item/index.ts b/src/routes/Calendar/List/Item/index.ts
index 1cf96beb5..1ab8e0585 100644
--- a/src/routes/Calendar/List/Item/index.ts
+++ b/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 };
diff --git a/src/routes/Calendar/List/List.tsx b/src/routes/Calendar/List/List.tsx
index 13745e380..b07dfc828 100644
--- a/src/routes/Calendar/List/List.tsx
+++ b/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) => (
-                    <Item
-                        key={item.date.day}
-                        {...item}
-                        selected={selected}
-                        monthInfo={monthInfo}
-                        profile={profile}
-                        onClick={onChange}
-                    />
-                ))
+                items.length === 0 ?
+                    [1, 2, 3].map((index) => (
+                        <ItemPlaceholder key={index} />
+                    ))
+                    :
+                    filteredItems.map((item) => (
+                        <Item
+                            key={item.date.day}
+                            {...item}
+                            selected={selected}
+                            monthInfo={monthInfo}
+                            profile={profile}
+                            onClick={onChange}
+                        />
+                    ))
             }
         </div>
     );