Merge pull request #1147 from roiLeo/feature/collection/skelton

feat(collection): skeleton

Author: yangwao

src/components/rmrk/Gallery/CollectionActivity.vue

@@ -1,45 +1,51 @@
 <template>
   <div>
-    <div class="level my-4 collection" v-if="nfts">
+    <div class="level my-4 collection">
       <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ listedCount }} ⊆ {{ collectionLength }}</p>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
+          <p class="title">
+            {{ listedCount }} ⊆ {{ collectionLength }}
+          </p>
           <p class="heading">Listed / Total Items</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
-        <div>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
           <p class="title">
             <Money :value="collectionFloorPrice" inline />
           </p>
           <p class="heading">Floor price</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
-        <div>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
           <p class="title">
             <Money :value="collectionTradedVolumeNumber" inline />
           </p>
           <p class="heading">Volume traded</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
-        <div>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
           <p class="title">{{ uniqueOwnerCount }} ⊆ {{ differentOwnerCount }}</p>
           <p class="heading">Unique / Owners</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
-        <div>
-          <p class="title">
-            {{ disributionCount }}
-          </p>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
+          <p class="title">{{ disributionCount }}</p>
           <p class="heading">Distribution</p>
         </div>
       </div>
 
       <div class="level-item has-text-centered">
-        <div>
+        <b-skeleton position="is-centered" width="50%" :active="!nfts.length" size="is-small"></b-skeleton>
+        <div v-if="nfts.length">
           <p class="title">
             <Money
               :value="collectionDailyTradedVolumeNumber"
@@ -91,8 +97,8 @@ export default class extends Vue {
     return Math.min(...this.onlyListedNfts)
   }
 
-  get disributionCount(): string {
-    return (this.differentOwnerCount / this.uniqueOwnerCount || 1).toFixed(4)
+  get disributionCount(): number {
+    return Number((this.differentOwnerCount / (this.uniqueOwnerCount || 1)).toFixed(4))
   }
 
   get uniqueOwnerCount(): number {

src/components/rmrk/Gallery/CollectionItem.vue

@@ -1,43 +1,43 @@
 <template>
   <div class="section">
-    <div class="pack-item-wrapper container">
+    <div class="container">
       <div class="columns is-centered">
         <div class="column is-half has-text-centered">
           <div class="container image is-128x128 mb-2">
-            <b-image
-              v-if="!isLoading"
+            <BasicImage
               :src="image"
               :alt="name"
-              ratio="1by1"
               rounded
-            ></b-image>
+              customClass="collection__image"
+            />
           </div>
           <h1 class="title is-2">
-            {{ name }}
+            <template v-if="!isLoading">
+              {{ name }}
+            </template>
+            <b-skeleton :active="isLoading" size="is-medium"></b-skeleton>
           </h1>
         </div>
       </div>
 
       <div class="columns is-align-items-center">
         <div class="column">
-          <div class="label">
-            {{ $t('creator') }}
-          </div>
-          <div class="subtitle is-size-6">
-            <ProfileLink :address="issuer" :inline="true" :showTwitter="true"/>
-          </div>
-        </div>
-        <div class="column" v-if="owner">
-          <div class="label">
-            {{ $t('owner') }}
-          </div>
-          <div class="subtitle is-size-6">
-            <ProfileLink :address="owner" :inline="true" :showTwitter="true" />
+          <div v-if="!isLoading">
+            <div class="label">
+              {{ $t('creator') }}
+            </div>
+            <div v-if="issuer" class="subtitle is-size-6">
+              <ProfileLink :address="issuer" inline showTwitter />
+            </div>
           </div>
+          <b-skeleton :active="isLoading" width="40%" size="is-small"></b-skeleton>
+          <b-skeleton :active="isLoading" width="60%" size="is-small"></b-skeleton>
         </div>
+
         <div class="column is-6-tablet is-7-desktop is-8-widescreen">
           <CollectionActivity :nfts="stats" />
         </div>
+
         <div class="column has-text-right">
           <Sharing v-if="sharingVisible"
             class="mb-2"
@@ -48,8 +48,8 @@
         </div>
       </div>
 
-      <b-tabs v-model="activeTab">
-        <b-tab-item label="Collection">
+      <b-tabs position="is-centered" v-model="activeTab">
+        <b-tab-item label="Collection" value="collection">
           <div class="columns is-centered">
             <div class="column is-8 has-text-centered">
               <CollapseWrapper
@@ -68,7 +68,7 @@
             </b-field>
           </Search>
 
-          <GalleryCardList :items="collection.nfts" :horizontalLayout="true" />
+          <GalleryCardList :items="collection.nfts" horizontalLayout />
 
           <Pagination
             class="py-5"
@@ -79,8 +79,8 @@
             :per-page="first"
           />
         </b-tab-item>
-        <b-tab-item label="Activity">
-          <CollectionPriceChart v-if="activeTab === 1" :priceData="priceData" />
+        <b-tab-item label="Activity" value="activity">
+          <CollectionPriceChart :priceData="priceData" />
         </b-tab-item>
       </b-tabs>
     </div>
@@ -89,17 +89,19 @@
 
 <script lang="ts" >
 import { emptyObject } from '@/utils/empty'
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
 import { CollectionWithMeta, Interaction } from '../service/scheme'
 import {
   sanitizeIpfsUrl, fetchCollectionMetadata, sortByTimeStamp, onlyEvents, onlyPriceEvents,
   eventTimestamp, soldNFTPrice, collectionFloorPriceList, PriceDataType, onlyBuyEvents
 } from '../utils'
 import isShareMode from '@/utils/isShareMode'
+import shouldUpdate from '@/utils/shouldUpdate'
 import collectionById from '@/queries/collectionById.graphql'
 import nftListByCollection from '@/queries/nftListByCollection.graphql'
 import { CollectionMetadata } from '../types'
 import { NFT } from '@/components/rmrk/service/scheme'
+import { exist } from '@/components/rmrk/Gallery/Search/exist'
 import { SearchQuery } from './Search/types'
 import ChainMixin from '@/utils/mixins/chainMixin'
 
@@ -114,6 +116,7 @@ const components = {
   DonationButton: () => import('@/components/transfer/DonationButton.vue'),
   Layout: () => import('@/components/rmrk/Gallery/Layout.vue'),
   CollectionPriceChart: () => import('@/components/rmrk/Gallery/CollectionPriceChart.vue'),
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
   CollapseWrapper: () => import('@/components/shared/collapse/CollapseWrapper.vue'),
 }
 @Component<CollectionItem>({
@@ -140,27 +143,30 @@ export default class CollectionItem extends Mixins(
 ) {
   private id = '';
   private collection: CollectionWithMeta = emptyObject<CollectionWithMeta>();
-  private isLoading = false;
   public meta: CollectionMetadata = emptyObject<CollectionMetadata>();
   private searchQuery: SearchQuery = {
     search: '',
     type: '',
     sortBy: 'BLOCK_NUMBER_DESC',
     listed: false,
   };
-  private activeTab = 0;
+  public activeTab = 'collection';
   private currentValue = 1;
   private first = 15;
-  private total = 0;
+  protected total = 0;
   protected stats: NFT[] = [];
   protected priceData: any = [];
 
+  get isLoading(): boolean {
+    return this.$apollo.queries.collection.loading
+  }
+
   get offset(): number {
     return this.currentValue * this.first - this.first
   }
 
-  get image(): string {
-    return this.meta.image || ''
+  get image(): string|undefined {
+    return this.meta.image
   }
 
   get description(): string {
@@ -179,10 +185,6 @@ export default class CollectionItem extends Mixins(
     return this.collection.issuer || ''
   }
 
-  get owner(): string {
-    return this.collection.issuer === (this.collection as any).currentOwner ? '' : (this.collection as any).currentOwner
-  }
-
   get sharingVisible(): boolean {
     return !isShareMode
   }
@@ -206,10 +208,12 @@ export default class CollectionItem extends Mixins(
   }
 
   public created(): void {
-    this.isLoading = true
     this.checkId()
+    this.checkActiveTab()
+    this.loadStats()
     this.$apollo.addSmartQuery('collection', {
       query: collectionById,
+      loadingKey: 'isLoading',
       variables: () => {
         return {
           id: this.id,
@@ -226,11 +230,9 @@ export default class CollectionItem extends Mixins(
       result: this.handleResult,
     })
 
-    this.loadStats()
-    this.isLoading = false
   }
 
-  public async loadStats(): Promise<void> {
+  public loadStats(): void {
     const nftStatsP = this.$apollo.query({
       query: nftListByCollection,
       variables: {
@@ -245,29 +247,27 @@ export default class CollectionItem extends Mixins(
   }
 
   public loadPriceData(): void {
-
     this.priceData = []
 
-    const events : Interaction[][] = this.stats?.map(onlyEvents) || []
-    const priceEvents : Interaction[][] = events.map(this.priceEvents) || []
+    const events: Interaction[][] = this.stats?.map(onlyEvents) || []
+    const priceEvents: Interaction[][] = events.map(this.priceEvents) || []
 
-    const overTime : string[] = priceEvents.flat().sort(sortByTimeStamp).map(eventTimestamp)
+    const overTime: string[] = priceEvents.flat().sort(sortByTimeStamp).map(eventTimestamp)
 
-    const floorPriceData : PriceDataType[] = overTime.map(collectionFloorPriceList(priceEvents, this.decimals))
+    const floorPriceData: PriceDataType[] = overTime.map(collectionFloorPriceList(priceEvents, this.decimals))
 
     const buyEvents = events.map(onlyBuyEvents)?.flat().sort(sortByTimeStamp)
-    const soldPriceData : PriceDataType[] = buyEvents?.map(soldNFTPrice(this.decimals))
+    const soldPriceData: PriceDataType[] = buyEvents?.map(soldNFTPrice(this.decimals))
 
     this.priceData = [floorPriceData, soldPriceData]
   }
 
   public async handleResult({data}: any): Promise<void> {
     this.total = data.collectionEntity.nfts.totalCount
-    this.fetchMetadata()
+    await this.fetchMetadata()
   }
 
   public async fetchMetadata(): Promise<void> {
-    console.log(this.collection['metadata'], !this.meta['image'])
     if (this.collection['metadata'] && !this.meta['image']) {
       const meta = await fetchCollectionMetadata(this.collection)
       this.meta = {
@@ -283,12 +283,34 @@ export default class CollectionItem extends Mixins(
     }
   }
 
+  public checkActiveTab(): void {
+    exist(this.$route.query.tab, (val) => {
+      this.activeTab = val
+    })
+  }
+
+  @Watch('activeTab')
+  protected onTabChange(val: string, oldVal: string): void {
+    if (shouldUpdate(val, oldVal)) {
+      this.$router.replace({
+        name: String(this.$route.name),
+        query: { tab: val },
+      })
+    }
+  }
+
   get iframeSettings(): Record<string, unknown> {
     return { width: '100%', height: '100vh' }
   }
 
-  protected priceEvents(nftEvents:Interaction[]) : Interaction[] {
+  protected priceEvents(nftEvents: Interaction[]): Interaction[] {
     return nftEvents.filter(onlyPriceEvents)
   }
 }
 </script>
+
+<style>
+.collection__image img {
+  color: transparent;
+}
+</style>

src/components/rmrk/Gallery/GalleryCardList.vue

@@ -38,8 +38,8 @@ export default class GalleryCardList extends Vue {
   @Prop({ default: 'nftDetail' }) public type!: string;
   @Prop({ default: 'rmrk/detail' }) public link!: string;
   @Prop() public items!: RmrkType[];
-  @Prop({ default: false }) public horizontalLayout!: boolean;
-  get classLayout() {
+  @Prop({ type: Boolean, default: false }) public horizontalLayout!: boolean;
+  get classLayout(): string {
     return this.$store.getters.getLayoutClass
   }
 }

src/components/shared/view/BasicImage.vue

@@ -9,7 +9,7 @@
     :rounded="rounded"
   >
     <template #placeholder>
-      <b-skeleton class="skeleton-placeholder" height="100%"></b-skeleton>
+      <b-skeleton class="skeleton-placeholder" :circle="rounded" height="100%"></b-skeleton>
     </template>
   </b-image>
 </template>
@@ -32,9 +32,10 @@ export default class BasicImage extends Vue {
 </script>
 
 <style scoped>
- .b-skeleton {
-    height: 100%;
-    position: absolute;
-    top: 0;
+.b-skeleton {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 </style>

src/utils/math.ts

@@ -40,8 +40,6 @@ export const between = (dateA: Date, dateB: Date) => (event: Interaction): boole
   (isBefore(parseISO(event.timestamp), dateB))
 
 
-export function uniqueCount<T>(self: T[]): number {
-  return new Set(self).size
-}
+export const uniqueCount = <T>(self: T[]): number => new Set(self).size