[edit] style

src/assets/svg/icon-tweet-loading.svg

@@ -0,0 +1,2 @@
+<svg height="100%" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke: rgb(29, 155, 240); opacity: 0.2;"></circle><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke: rgb(29, 155, 240); stroke-dasharray: 80; stroke-dashoffset: 60;"></circle></svg>

src/logic/content/twitter.js

@@ -1911,12 +1911,14 @@ const setTabContentStyle = (params) => {
     let tweetTabContent = getTweetTabContent();
     if (tweetTabContent) {
         if (tweetTabContentDisply == 'block') {
-            let { display } = tweetTabContent.style;
-            if (display == 'none') {
-                tweetTabContent.style.display = 'block';
+            let { visibility } = tweetTabContent.style;
+            if (visibility == 'hidden') {
+                tweetTabContent.style.visibility = 'visible';
+                tweetTabContent.style.height = 'auto';
             }
         } else {
-            tweetTabContent.style.display = tweetTabContentDisply;
+            tweetTabContent.style.visibility = 'hidden';
+            tweetTabContent.style.height = '0px';
         }
     }
 
@@ -1976,9 +1978,18 @@ export const setTabGroupIframeStyle = (params) => {
     }
 }
 
+/**
+ * 
+document.querySelector('div[data-testid="ScrollSnap-nextButtonWrapper"]').nextElementSibling.addEventListener('click', function() {
+    console.log('1')
+})
+ */
+
 export const pageJumpHandler = (params) => {
     let { url } = params
-    window.open(url)
+    if(url) {
+        window.open(url)
+    }
 }
 
 export const getTweetProfileNavTop = (params) => {

src/view/components/nft-group-list.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="list" v-if="detail">
+    <div class="list" v-show="detail && detail.length">
         <div class="list-content">
             <div
                 class="item"
@@ -35,10 +35,7 @@ let detail = ref(null);
 let emits = defineEmits(['clickCallBack', 'updateList']);
 
 watch(detail, (newVal) => {
-    console.log('newVal', newVal)
-    if(newVal) {
-        emits('updateList', newVal);
-    }
+    emits('updateList', newVal);
 })
 
 const clickHandler = (item) => {
@@ -55,6 +52,8 @@ onBeforeMount(() => {
         let { data } = res;
         if (data !== null) {
             detail.value = data;
+        } else {
+            emits('updateList', data);
         }
     })
 })

src/view/iframe/tab-group/joined-group-list.vue

@@ -46,12 +46,21 @@ const sendMessageToContent = (params) => {
 }
 
 const updateList = (data) => {
-    setHeight();
+    setHeight(data);
 };
 
-const setHeight = () => {
+const setHeight = (data) => {
     const maxHeight = 321;
     nextTick(() => {
+        if(!data || !data.length) { 
+            sendChromeTabMessage({
+                actionType: "IFRAME_JOINED_GROUP_SET_STYLE",
+                data: {
+                    height: '0px'
+                }
+            })
+            return;
+        }
         let listDom = document.querySelector('.list-content');
         if(listDom) {
             const titleDomHeight = 56, marginBottom = 12;

src/view/iframe/tab-group/tab-group.vue

@@ -1,53 +1,60 @@
 <template>
     <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
         <div class="list-wrapper" ref="listWrapperDom">
-            <div class="list-item" 
-                v-for="(item, index) in listData" 
-                :key="index"
-                @click="clickItem(item, index)">
-                <div class="left">
-                    <img :src="item.avatarUrl" class="icon-avatar">
-                </div>
-                <div class="right">
-                    <div class="top">
-                        <div class="icon-nft-wrapper">
-                            <el-popover
-                                :width="340"
-                                placement="right"
-                                trigger="hover"
-                                popper-style="background: #FFFFFF;
-                                    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
-                                    border-radius: 20px;
-                                    padding: 20px;
-                                    box-sizing: border-box;">
-                                <template #reference>
-                                    <img :src="item.nftItem.imagePath" class="icon-nft" @click.stop="">
-                                </template>
-                                <template #default>
-                                    <div class="preview-nft">
-                                        <img :src="item.nftItem.imagePath" class="icon-nft-big">
-                                        <div class="content">
-                                            <div class="nft-name">
-                                                {{item.nftItem.nftItemName}} 
-                                            </div>
-                                            <div class="nft-desc">
-                                                <div v-html="item.nftItem.metadata.description"></div>
+            
+            <template v-if="listData.length">
+                <div class="list-item" 
+                    v-for="(item, index) in listData" 
+                    :key="index"
+                    @click="clickItem(item, index)">
+                    <div class="left">
+                        <img :src="item.avatarUrl" class="icon-avatar">
+                    </div>
+                    <div class="right">
+                        <div class="top">
+                            <div class="icon-nft-wrapper">
+                                <el-popover
+                                    :width="340"
+                                    placement="right"
+                                    trigger="hover"
+                                    popper-style="background: #FFFFFF;
+                                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+                                        border-radius: 20px;
+                                        padding: 20px;
+                                        box-sizing: border-box;">
+                                    <template #reference>
+                                        <img :src="item.nftItem.imagePath" class="icon-nft" @click.stop="">
+                                    </template>
+                                    <template #default>
+                                        <div class="preview-nft">
+                                            <img :src="item.nftItem.imagePath" class="icon-nft-big">
+                                            <div class="content">
+                                                <div class="nft-name">
+                                                    {{item.nftItem.nftItemName}} 
+                                                </div>
+                                                <div class="nft-desc">
+                                                    <div v-html="item.nftItem.metadata.description"></div>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                </template>
-                            </el-popover>
-                        </div>
-                        <div class="nick-name">
-                            {{item.nickName}}{{index}}
-                        </div>
-                        <div class="screen-name">
-                            {{item.screenName}}
+                                    </template>
+                                </el-popover>
+                            </div>
+                            <div class="nick-name">
+                                {{item.nickName}}{{index}}
+                            </div>
+                            <div class="screen-name">
+                                {{item.screenName}}
+                            </div>
                         </div>
+                        <div class="post-content" v-html="item.textContent"></div>
                     </div>
-                    <div class="post-content" v-html="item.textContent"></div>
                 </div>
-            </div>
+            </template>
+            <template v-else >
+                    <img :src="require('@/assets/svg/icon-tweet-loading.svg')" 
+                            class="icon-loading" >
+            </template>
         </div>
     </div>
 </template>
@@ -65,6 +72,7 @@ let groupInfo = {};
 let listData = ref([])
 let listWrapperDom = ref(null);
 let pageWrapperDom = ref(null);
+let loading = ref(false);
 
 let listReqParams = {
     params: {
@@ -72,6 +80,7 @@ let listReqParams = {
         preTimestamp: ''
     },
     loadMore: false,
+    isInit: false,
 };
 
 const clickItem = (data, index) => {
@@ -165,7 +174,6 @@ const sendMessageToContent = (params) => {
 }
 
 const getListData = () => {
-    if(!groupInfo.nftGroupId) return;
     getGroupPostList({
         params: {
             pageSize: listReqParams.params.pageSize,
@@ -173,6 +181,7 @@ const getListData = () => {
             groupId: groupInfo.nftGroupId
         }
     }).then(res => {
+        loading.value = false;
         if (res.code == 0) {
             let resData = res.data;
             if (resData.length) {
@@ -210,6 +219,8 @@ const initData = () => {
                 }).then(res => {
                     if(res.code == 0) {
                         groupInfo = res.data || {};
+                        if(!groupInfo.nftGroupId) return;
+                        loading.value = true;
                         getListData()
                     }
                 })
@@ -405,5 +416,22 @@ html, body, #app {
             }
         }
     }
+
+    .icon-loading {
+        width: 26px;
+        height: 26px;  
+        display: block;
+        margin: 20px auto;
+        animation: loading infinite 0.8s linear;
+    }
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 </style>