render fire icon on topic error

net/web/src/Carousel/Carousel.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
 import { CarouselWrapper } from './Carousel.styled';
-import { RightOutlined, LeftOutlined, CloseOutlined } from '@ant-design/icons';
+import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons';
 import ReactResizeDetector from 'react-resize-detector';
 
-export function Carousel({ ready, items, itemRenderer, itemRemove }) {
+export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
   const [slots, setSlots] = useState([]);
   const [carouselRef, setCarouselRef] = useState(false);
   const [itemIndex, setItemIndex] = useState(0);
@@ -120,11 +120,20 @@ export function Carousel({ ready, items, itemRenderer, itemRemove }) {
     }
   }
 
-  if (!ready) {
+  if (!ready || error) {
     return (
       <CarouselWrapper>
         <div class="carousel">
-          <Skeleton.Image style={{ height: 128 }} />
+          {error && (
+            <div class="status">
+              <FireOutlined style={{ fontSize: 32, color: 'red' }} />
+            </div>
+          )}
+          {!ready && !error && (
+            <div class="status">
+              <PictureOutlined style={{ fontSize: 32 }} />
+            </div>
+          )}
         </div>
         <div class="arrows">
           <div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div>

net/web/src/Carousel/Carousel.styled.js

@@ -19,6 +19,16 @@ export const CarouselWrapper = styled.div`
     scrollbar-width: none;
   }
 
+  .status {
+    width: 128px;
+    height: 128px;
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    color: #888888;
+    background-color: #eeeeee;
+  }
+
   .carousel::-webkit-scrollbar {
     display: none;
   }

net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js

@@ -104,7 +104,8 @@ export function useAddTopic() {
           updateState({ messageText: null, textColor: '#444444', textColorSet: false, textSize: 12, textSizeSet: false, assets: [] });
         }
         catch(err) {
-          window.alert(err);
+          console.log(err);
+          window.alert("failed to add message");
         }
         updateState({ busy: false });
       }

net/web/src/User/Conversation/TopicItem/TopicItem.jsx

@@ -96,7 +96,7 @@ export function TopicItem({ host, topic }) {
           <div class={nameClass}>{ name }</div>
           <div>{ getTime(offset) }</div>
         </div>
-        <Carousel ready={state.ready} items={state.assets} itemRenderer={renderAsset} />
+        <Carousel ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
         <div class="message">
           <Message />
         </div>

net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js

@@ -14,6 +14,7 @@ export function useTopicItem(topic) {
     message: null,
     created: null,
     ready: false,
+    error: false,
     owner: false,
     assets: [],
     editing: false,
@@ -48,6 +49,7 @@ export function useTopicItem(topic) {
     const { status, transform, data } = topic.data.topicDetail;
     let message;
     let ready = false;
+    let error = false;
     let assets = [];
     if (status === 'confirmed') {
       try {
@@ -65,6 +67,9 @@ export function useTopicItem(topic) {
         if (transform === 'complete') {
           ready = true;
         }
+        if (transform === 'error') {
+          error = true;
+        }
       }
       catch(err) {
         console.log(err);
@@ -75,11 +80,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, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
       }
       else {
         const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
-        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
       }
     }
   }, [profile, card, conversation, topic]);