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,6 +82,7 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
 
   useEffect(() => {
     let assets = [];
+    if (ready) {
       for (let i = 0; i < items.length; i++) {
         assets.push((
           <ReactResizeDetector handleWidth={true} handleHeight={false}>
@@ -107,11 +109,12 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
           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,
+    ready: false,
-    transform: null,
     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 (transform === 'complete') {
         if (message.assets) {
           assets = message.assets;
           delete message.assets;
         }
+        if (transform === 'complete') {
+          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]);