From 9020cd93753c24beb46b11ca1d2fd4652584c254 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 12 Jul 2022 23:40:35 -0700
Subject: [PATCH] rendering topic error states

---
 net/web/src/Carousel/Carousel.jsx             |  2 +-
 .../User/Conversation/TopicItem/TopicItem.jsx | 22 ++++++++++++++++++-
 .../TopicItem/useTopicItem.hook.js            |  7 ++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/net/web/src/Carousel/Carousel.jsx b/net/web/src/Carousel/Carousel.jsx
index f6c58145..a8725551 100644
--- a/net/web/src/Carousel/Carousel.jsx
+++ b/net/web/src/Carousel/Carousel.jsx
@@ -126,7 +126,7 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
         <div class="carousel">
           {error && (
             <div class="status">
-              <FireOutlined style={{ fontSize: 32, color: 'red' }} />
+              <FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
             </div>
           )}
           {!ready && !error && (
diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
index 253173f1..7e55cb73 100644
--- a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
+++ b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
@@ -5,7 +5,7 @@ import { VideoAsset } from './VideoAsset/VideoAsset';
 import { AudioAsset } from './AudioAsset/AudioAsset';
 import { ImageAsset } from './ImageAsset/ImageAsset';
 import { Avatar } from 'avatar/Avatar';
-import { Space, Button, Input } from 'antd';
+import { Space, Skeleton, Button, Input } from 'antd';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Carousel } from 'Carousel/Carousel';
 
@@ -86,6 +86,26 @@ export function TopicItem({ host, topic }) {
     return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
   }
 
+  if (!state.confirmed) {
+    return (
+      <TopicItemWrapper>
+        <div class="avatar">
+          <Avatar imageUrl={state.imageUrl} />
+        </div>
+        <div class="topic">
+          <div class="info">
+            <div class={nameClass}>{ name }</div>
+            <div>{ getTime(offset) }</div>
+          </div>
+          <Skeleton />
+          <div class="options">
+            <Options />
+          </div>
+        </div>
+      </TopicItemWrapper>
+    )
+  }
+
   return (
     <TopicItemWrapper>
       <div class="avatar">
diff --git a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
index 1bb3ca4b..1b725476 100644
--- a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
+++ b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
@@ -13,6 +13,7 @@ export function useTopicItem(topic) {
     imageUrl: null,
     message: null,
     created: null,
+    confirmed: false,
     ready: false,
     error: false,
     owner: false,
@@ -50,8 +51,10 @@ export function useTopicItem(topic) {
     let message;
     let ready = false;
     let error = false;
+    let confirmed = false;
     let assets = [];
     if (status === 'confirmed') {
+      confirmed = true;
       try {
         message = JSON.parse(data);
         if (message.textColor != null) {
@@ -80,11 +83,11 @@ export function useTopicItem(topic) {
       const { guid, created } = topic.data.topicDetail;
       if (profile.state.profile.guid == guid) {
         const { name, handle, imageUrl } = profile.actions.getProfile();
-        updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
       }
       else {
         const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
-        updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
       }
     }
   }, [profile, card, conversation, topic]);