Skip to content
Snippets Groups Projects
Verified Commit 02ceed59 authored by Phil Hughes's avatar Phil Hughes
Browse files

Fixes the skeleton loaders in the merge request widget

parent f6db5905
No related branches found
No related tags found
3 merge requests!118700Remove refactor_vulnerability_filters feature flag,!116602Draft: Resolve "Remove the possibility to set redis_slot in known_events",!115223Fixes the skeleton loaders in the merge request widget
......@@ -58,7 +58,7 @@ export default {
:class="wrapperClasses"
v-on="$listeners"
>
<div v-if="isLoading" class="gl-w-full mr-conflict-loader">
<div v-if="isLoading" class="gl-w-full mr-state-loader">
<slot name="loading">
<div class="gl-display-flex">
<status-icon status="loading" />
......
......@@ -133,10 +133,10 @@ export default {
<template>
<state-container :mr="mr" status="scheduled" :is-loading="loading" :actions="actions">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="3" width="24" height="24" rx="4" />
<rect x="32" y="7" width="150" height="16" rx="4" />
<rect x="190" y="7" width="144" height="16" rx="4" />
<gl-skeleton-loader :width="334" :height="24">
<rect x="0" y="0" width="24" height="24" rx="4" />
<rect x="32" y="2" width="150" height="20" rx="4" />
<rect x="190" y="2" width="144" height="20" rx="4" />
</gl-skeleton-loader>
</template>
<template v-if="!loading">
......
......@@ -74,10 +74,10 @@ export default {
<template>
<state-container :mr="mr" status="failed" :is-loading="isLoading">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="7" width="150" height="16" rx="4" />
<rect x="158" y="7" width="84" height="16" rx="4" />
<rect x="250" y="7" width="84" height="16" rx="4" />
<gl-skeleton-loader :width="334" :height="24">
<rect x="0" y="0" width="24" height="24" rx="4" />
<rect x="32" y="2" width="150" height="20" rx="4" />
<rect x="190" y="2" width="144" height="20" rx="4" />
</gl-skeleton-loader>
</template>
<template v-if="!isLoading">
......
......@@ -197,9 +197,9 @@ export default {
<div>
<state-container :mr="mr" :status="status" :is-loading="isLoading">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="3" width="24" height="24" rx="4" />
<rect x="32" y="5" width="302" height="20" rx="4" />
<gl-skeleton-loader :width="334" :height="24">
<rect x="0" y="0" width="24" height="24" rx="4" />
<rect x="32" y="2" width="302" height="20" rx="4" />
</gl-skeleton-loader>
</template>
<template v-if="!isLoading">
......
......@@ -501,11 +501,13 @@ export default {
>
<div v-if="loading" class="mr-widget-body">
<div class="gl-w-full mr-ready-to-merge-loader">
<gl-skeleton-loader :width="418" :height="30">
<rect x="0" y="3" width="24" height="24" rx="4" />
<rect x="32" y="0" width="70" height="30" rx="4" />
<rect x="110" y="7" width="150" height="16" rx="4" />
<rect x="268" y="7" width="150" height="16" rx="4" />
<gl-skeleton-loader :width="418" :height="86">
<rect x="0" y="0" width="144" height="20" rx="4" />
<rect x="0" y="26" width="100" height="16" rx="4" />
<rect x="108" y="26" width="100" height="16" rx="4" />
<rect x="0" y="48" width="130" height="16" rx="4" />
<rect x="0" y="70" width="80" height="16" rx="4" />
<rect x="88" y="70" width="90" height="16" rx="4" />
</gl-skeleton-loader>
</div>
</div>
......
......@@ -1241,3 +1241,11 @@ $tabs-holder-z-index: 250;
}
}
}
.mr-state-loader {
max-width: 334px;
svg {
vertical-align: middle;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment