render placeholder when processing assets

net/web/src/Carousel/Carousel.jsx

@@ -1,4 +1,5 @@
 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 ReactResizeDetector from 'react-resize-detector';
@@ -6,7 +7,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import login from '../login.png';
 import test from '../test.png';
 
-export function Carousel({ items, itemRenderer, itemRemove }) {
+export function Carousel({ ready, items, itemRenderer, itemRemove }) {
   const [slots, setSlots] = useState([]);
   const [carouselRef, setCarouselRef] = useState(false);
   const [itemIndex, setItemIndex] = useState(0);
@@ -81,37 +82,39 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
 
   useEffect(() => {
     let assets = [];
-    for (let i = 0; i < items.length; i++) {
-      assets.push((
-        <ReactResizeDetector handleWidth={true} handleHeight={false}>
-          {({ width, height }) => {
-            itemWidth.current.set(i, width);
-            return (
-              <div class="item noselect">
-                <div class="asset">{ itemRenderer(items[i]) }</div>
-                <RemoveItem index={i} />
-              </div>
-            );
-          }}
-        </ReactResizeDetector>
-      ));
-    }
-    if (items.length > 0) {
-      assets.push(<div class="space">&nbsp;</div>)
-    }
-    if (itemIndex >= items.length) {
-      if (items.length > 0) {
-        setItemIndex(items.length - 1);
+    if (ready) {
+      for (let i = 0; i < items.length; i++) {
+        assets.push((
+          <ReactResizeDetector handleWidth={true} handleHeight={false}>
+            {({ width, height }) => {
+              itemWidth.current.set(i, width);
+              return (
+                <div class="item noselect">
+                  <div class="asset">{ itemRenderer(items[i]) }</div>
+                  <RemoveItem index={i} />
+                </div>
+              );
+            }}
+          </ReactResizeDetector>
+        ));
       }
-      else {
-        setItemIndex(0);
+      if (items.length > 0) {
+        assets.push(<div class="space">&nbsp;</div>)
+      }
+      if (itemIndex >= items.length) {
+        if (items.length > 0) {
+          setItemIndex(items.length - 1);
+        }
+        else {
+          setItemIndex(0);
+        }
       }
     }
     
     setSlots(assets);
     setScroll();
     setArrows();
-  }, [items]);
+  }, [ready, items]);
 
   const onRefSet = (r) => {
     if (r != null) {
@@ -120,6 +123,20 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
     }
   }
 
+  if (!ready) {
+    return (
+      <CarouselWrapper>
+        <div class="carousel">
+          <Skeleton.Image style={{ height: 128 }} />
+        </div>
+        <div class="arrows">
+          <div class="arrow" onClick={onRight}><RightOutlined style={{ visibility: scrollRight }} /></div>
+          <div class="arrow" onClick={onLeft}><LeftOutlined style={{ visibility: scrollLeft }} /></div>
+        </div>
+      </CarouselWrapper>
+    )
+  }
+
   if (slots.length != 0) {
     return (
       <CarouselWrapper>

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

@@ -85,7 +85,7 @@ export function AddTopic() {
     <AddTopicWrapper>
       <div class="container noselect">
         <div class="carousel">
-          <Carousel items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
+          <Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
         </div>
         <div class="input">
           <Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }} onKeyPress={onKey}

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

@@ -35,7 +35,7 @@ export function TopicItem({ topic }) {
             <CommentOutlined />
           </div>
         </div>
-        <Carousel items={state.assets} itemRenderer={renderAsset} />
+        <Carousel ready={state.ready} items={state.assets} itemRenderer={renderAsset} />
         <div class="message">{ state.message?.text }</div>
       </div>
     </TopicItemWrapper>

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

@@ -13,8 +13,7 @@ export function useTopicItem(topic) {
     imageUrl: null,
     message: null,
     created: null,
-    status: null,
-    transform: null,
+    ready: false,
     assets: [],
   });
 
@@ -28,17 +27,24 @@ export function useTopicItem(topic) {
 
   useEffect(() => {
 
+    if (!topic?.data) {
+      console.log("invalid topic:", topic);
+      return;
+    }
+
     const { status, transform, data } = topic.data.topicDetail;
     let message;
+    let ready = false;
     let assets = [];
     if (status === 'confirmed') {
       try {
         message = JSON.parse(data);
+        if (message.assets) {
+          assets = message.assets;
+          delete message.assets;
+        }
         if (transform === 'complete') {
-          if (message.assets) {
-            assets = message.assets;
-            delete message.assets;
-          }
+          ready = true;
         }
       }
       catch(err) {
@@ -50,11 +56,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, created });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created });
       }
       else {
         const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
-        updateState({ name, handle, imageUrl, status, message, transform, assets, created });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created });
       }
     }
   }, [profile, card, conversation, topic]);