Skip to content

Commit 54c57e9

Browse files
Samar Adel0oM4R
Samar Adel
and
0oM4R
authored
Add skeleton loader for node details cards (#4160)
* Add skeleton loader for node details cards * Add skeleton loader for the heading * Update packages/playground/src/components/node_details_cards/card_details.vue Co-authored-by: Omar Kassem <omarksm09@gmail.com> --------- Co-authored-by: Omar Kassem <omarksm09@gmail.com>
1 parent 478888b commit 54c57e9

1 file changed

Lines changed: 92 additions & 75 deletions

File tree

‎packages/playground/src/components/node_details_cards/card_details.vue‎

Lines changed: 92 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,97 @@
11
<template>
2-
<v-card :loading="loading">
3-
<v-alert class="pa-5" style="height: 20px" v-if="title">
4-
<h4 class="text-center font-weight-medium">
5-
<v-icon :icon="icon" size="large" />
6-
{{ title }}
7-
</h4>
8-
</v-alert>
9-
<v-card-item :class="`mt-2 mb-2 ${$props.isMap ? 'map' : ''}`">
10-
<v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="$props.error">
11-
{{ $props.error }}
12-
</v-alert>
13-
<div v-else-if="$props.isMap">
14-
<tf-map :nodes="transformedObject" r="76" g="187" b="217"></tf-map>
15-
</div>
16-
17-
<div :class="`items`" v-else>
18-
<slot name="gpu-hint-message" />
19-
20-
<v-row class="bb-gray" v-for="item in items" :key="item.name">
21-
<v-col v-if="$props.iperf" class="font-14 d-flex justify-space-between">
22-
<p class="ml-20 font-14">{{ item.name }}/{{ item.type }}</p>
23-
<div>
24-
<v-icon icon="mdi-arrow-up"></v-icon>
25-
<span class="mx-3">{{ item.uploadSpeed }}</span>
26-
</div>
27-
<div>
28-
<v-icon icon="mdi-arrow-down"></v-icon>
29-
<span class="mx-3">{{ item.downloadSpeed }}</span>
30-
</div>
31-
</v-col>
32-
<v-col v-if="!$props.iperf" class="d-flex justify-start align-center ml-3">
33-
<p class="font-14">{{ item.name }}</p>
34-
<v-chip class="ml-4" v-if="item.nameHint" :color="item.nameHintColor">{{ item.nameHint }}</v-chip>
35-
</v-col>
36-
<v-col v-if="!$props.iperf" class="d-flex overflowText justify-end align-center mr-3">
37-
<p class="font-14" v-if="!item.icon && !item.hint && !item.imgSrc">
38-
{{ item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value }}
39-
</p>
40-
41-
<v-tooltip class="overflowText" v-if="item.hint && !item.icon" location="top" :text="item.hint">
42-
<template #activator="{ props }">
43-
<span class="flag-avatar" v-if="item.name === 'Flag' && !item.imgSrc">NA</span>
44-
<p class="font-14" v-bind="props">
45-
{{
46-
item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value
47-
}}
48-
</p>
49-
</template>
50-
</v-tooltip>
51-
52-
<v-tooltip class="overflowText" v-if="item.hint && item.icon" location="top" :text="item.hint">
53-
<template #activator="{ props }">
54-
<p class="font-14" v-bind="props">
55-
{{
56-
item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value
57-
}}
58-
</p>
59-
<v-icon
60-
v-if="item.value && item.value.length && item.value != '-'"
61-
class="ml-1"
62-
v-bind="props"
63-
:icon="item.icon"
64-
@click="item.callback!(item.value!)"
65-
/>
66-
</template>
67-
</v-tooltip>
68-
69-
<v-tooltip location="top" v-else-if="item.imgSrc" :text="item.hint">
70-
<template #activator="{ props }">
71-
<img alt="flag" width="40" v-bind="props" :src="item.imgSrc" />
72-
</template>
73-
</v-tooltip>
74-
</v-col>
75-
</v-row>
2+
<v-card>
3+
<template v-if="loading">
4+
<div class="pa-4">
5+
<v-skeleton-loader type="heading" class="mb-4" />
6+
<div v-for="n in 3" :key="n" class="d-flex justify-space-between align-center py-2 bb-gray">
7+
<v-skeleton-loader type="text" width="40%" />
8+
<v-skeleton-loader type="text" width="30%" />
9+
</div>
7610
</div>
77-
</v-card-item>
11+
</template>
12+
<template v-else>
13+
<v-alert class="pa-5" style="height: 20px" v-if="title">
14+
<h4 class="text-center font-weight-medium">
15+
<v-icon :icon="icon" size="large" />
16+
{{ title }}
17+
</h4>
18+
</v-alert>
19+
<v-card-item :class="`mt-2 mb-2 ${$props.isMap ? 'map' : ''}`">
20+
<v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="$props.error">
21+
{{ $props.error }}
22+
</v-alert>
23+
<div v-else-if="$props.isMap">
24+
<tf-map :nodes="transformedObject" r="76" g="187" b="217"></tf-map>
25+
</div>
26+
27+
<div :class="`items`" v-else>
28+
<slot name="gpu-hint-message" />
29+
30+
<v-row class="bb-gray" v-for="item in items" :key="item.name">
31+
<v-col v-if="$props.iperf" class="font-14 d-flex justify-space-between">
32+
<p class="ml-20 font-14">{{ item.name }}/{{ item.type }}</p>
33+
<div>
34+
<v-icon icon="mdi-arrow-up"></v-icon>
35+
<span class="mx-3">{{ item.uploadSpeed }}</span>
36+
</div>
37+
<div>
38+
<v-icon icon="mdi-arrow-down"></v-icon>
39+
<span class="mx-3">{{ item.downloadSpeed }}</span>
40+
</div>
41+
</v-col>
42+
<v-col v-if="!$props.iperf" class="d-flex justify-start align-center ml-3">
43+
<p class="font-14">{{ item.name }}</p>
44+
<v-chip class="ml-4" v-if="item.nameHint" :color="item.nameHintColor">{{ item.nameHint }}</v-chip>
45+
</v-col>
46+
<v-col v-if="!$props.iperf" class="d-flex overflowText justify-end align-center mr-3">
47+
<p class="font-14" v-if="!item.icon && !item.hint && !item.imgSrc">
48+
{{
49+
item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value
50+
}}
51+
</p>
52+
53+
<v-tooltip class="overflowText" v-if="item.hint && !item.icon" location="top" :text="item.hint">
54+
<template #activator="{ props }">
55+
<span class="flag-avatar" v-if="item.name === 'Flag' && !item.imgSrc">NA</span>
56+
<p class="font-14" v-bind="props">
57+
{{
58+
item.value && item.value.length > maxLenChar
59+
? item.value.slice(0, maxLenChar) + "..."
60+
: item.value
61+
}}
62+
</p>
63+
</template>
64+
</v-tooltip>
65+
66+
<v-tooltip class="overflowText" v-if="item.hint && item.icon" location="top" :text="item.hint">
67+
<template #activator="{ props }">
68+
<p class="font-14" v-bind="props">
69+
{{
70+
item.value && item.value.length > maxLenChar
71+
? item.value.slice(0, maxLenChar) + "..."
72+
: item.value
73+
}}
74+
</p>
75+
<v-icon
76+
v-if="item.value && item.value.length && item.value != '-'"
77+
class="ml-1"
78+
v-bind="props"
79+
:icon="item.icon"
80+
@click="item.callback!(item.value!)"
81+
/>
82+
</template>
83+
</v-tooltip>
84+
85+
<v-tooltip location="top" v-else-if="item.imgSrc" :text="item.hint">
86+
<template #activator="{ props }">
87+
<img alt="flag" width="40" v-bind="props" :src="item.imgSrc" />
88+
</template>
89+
</v-tooltip>
90+
</v-col>
91+
</v-row>
92+
</div>
93+
</v-card-item>
94+
</template>
7895
</v-card>
7996
</template>
8097

0 commit comments

Comments
 (0)