show validator name before fully loaded

This commit is contained in:
liangping 2022-05-04 09:21:31 +08:00
parent 16395ee0df
commit 33e4773a89

View File

@ -34,77 +34,69 @@
/> />
</b-input-group> </b-input-group>
</b-card> </b-card>
<b-skeleton-wrapper :loading="loading"> <b-row>
<template #loading> <b-col
<b-row> v-for="(x,index) in uptime"
<b-col :key="index"
v-for="index in 60" sm="12"
:key="index" md="4"
sm="12" xl="3"
md="4" class="text-truncate"
xl="3" >
<div class="d-flex justify-content-between">
<b-form-checkbox
v-model="pinned"
:value="`${chain}#${x.address}`"
class="custom-control-warning text-truncate"
@change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox>
<span
v-if="missing[x.address]"
> >
<b-skeleton width="100%" /> <b-badge
</b-col> v-if="missing[x.address].missed_blocks_counter > 0"
</b-row> v-b-tooltip.hover.v-danger
</template> variant="light-danger"
<b-row> :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
<b-col class="text-danger text-bolder"
v-for="(x,index) in uptime"
:key="index"
sm="12"
md="4"
xl="3"
class="text-truncate"
>
<div class="d-flex justify-content-between">
<b-form-checkbox
v-model="pinned"
:value="`${chain}#${x.address}`"
class="custom-control-warning text-truncate"
@change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox>
<span
v-if="missing[x.address]"
> >
<b-badge {{ missing[x.address].missed_blocks_counter }}
v-if="missing[x.address].missed_blocks_counter > 0" </b-badge>
v-b-tooltip.hover.v-danger <b-badge
variant="light-danger" v-else
:title="`${missing[x.address].missed_blocks_counter} missed blocks`" v-b-tooltip.hover.v-success
class="text-danger text-bolder" variant="light-success"
> title="Perfect! No missed blocks"
{{ missing[x.address].missed_blocks_counter }} >
</b-badge> 0
<b-badge </b-badge>
v-else </span>
v-b-tooltip.hover.v-success </div>
variant="light-success" <b-skeleton-wrapper :loading="loading">
title="Perfect! No missed blocks" <template #loading>
> <b-skeleton width="100%" />
0 </template>
</b-badge> <template #default>
</span> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
</div>
<div class="d-flex justify-content-between align-self-stretch flex-wrap">
<div
v-for="(b,i) in blocks"
:key="i"
style="width:1.5%;"
><router-link :to="`./blocks/${b.height}`">
<div <div
v-b-tooltip.hover.v-second v-for="(b,i) in blocks"
:title="b.height" :key="i"
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'" style="width:1.5%;"
class="m-auto" ><router-link :to="`./blocks/${b.height}`">
>&nbsp;</div> <div
</router-link> v-b-tooltip.hover.v-second
:title="b.height"
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
class="m-auto"
>&nbsp;</div>
</router-link>
</div>
</div> </div>
</div> </template>
</b-col> </b-skeleton-wrapper>
</b-row> </b-col>
</b-skeleton-wrapper> </b-row>
</b-card> </b-card>
</div> </div>
</template> </template>