From 2056629a0478036a5a05cfb7ea2809306cb3f164 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 27 Jan 2026 14:05:06 +0530
Subject: [PATCH] feat(08-02): create loading and empty state components

Create two stateless components for chat UI states:

1. JKChatLoadingSpinner:
   - Displays spinner from reactstrap
   - Shows "Loading messages..." text
   - Used when fetchStatus is 'loading'

2. JKChatEmptyState:
   - Shows chat icon and encouraging message
   - Used when message list is empty
   - Centered layout with friendly copy

Both components are simple, stateless, and require no props.
Inline styles used for MVP (SCSS styling deferred to Plan 8.3).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../client/chat/JKChatEmptyState.js           | 31 +++++++++++++++++++
 .../client/chat/JKChatLoadingSpinner.js       | 26 ++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 jam-ui/src/components/client/chat/JKChatEmptyState.js
 create mode 100644 jam-ui/src/components/client/chat/JKChatLoadingSpinner.js

diff --git a/jam-ui/src/components/client/chat/JKChatEmptyState.js b/jam-ui/src/components/client/chat/JKChatEmptyState.js
new file mode 100644
index 000000000..8d8894c8d
--- /dev/null
+++ b/jam-ui/src/components/client/chat/JKChatEmptyState.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * JKChatEmptyState - Empty state component for chat
+ *
+ * Displays a friendly message when there are no messages in the channel yet.
+ * Used when messagesByChannel[channel] is empty.
+ */
+const JKChatEmptyState = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '48px 24px',
+      color: '#6c757d',
+      textAlign: 'center'
+    }}>
+      <div style={{ fontSize: '48px', marginBottom: '16px' }}>💬</div>
+      <p style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>
+        No messages yet
+      </p>
+      <p style={{ fontSize: '14px', margin: 0 }}>
+        Be the first to send a message in this chat!
+      </p>
+    </div>
+  );
+};
+
+export default JKChatEmptyState;
diff --git a/jam-ui/src/components/client/chat/JKChatLoadingSpinner.js b/jam-ui/src/components/client/chat/JKChatLoadingSpinner.js
new file mode 100644
index 000000000..63193b3a3
--- /dev/null
+++ b/jam-ui/src/components/client/chat/JKChatLoadingSpinner.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+/**
+ * JKChatLoadingSpinner - Loading state component for chat
+ *
+ * Displays a spinner with "Loading messages..." text while fetching chat history.
+ * Used when fetchStatus is 'loading'.
+ */
+const JKChatLoadingSpinner = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '48px 24px',
+      color: '#6c757d'
+    }}>
+      <Spinner color="primary" />
+      <p style={{ marginTop: '16px', fontSize: '14px' }}>Loading messages...</p>
+    </div>
+  );
+};
+
+export default JKChatLoadingSpinner;