chore: apply loading min-height

Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Jan 9, 2025 · 4042ed0 · 4042ed0
1 parent fa0a009
commit 4042ed0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue
@@ -177,6 +177,7 @@ watch(() => storeState.alertInfo, async (alertInfo) => {
         </div>
         <p-data-loader :loading="state.loading"
                        :data="state.slicedHistoryList"
+                       class="min-h-10"
         >
             <template v-if="state.slicedHistoryList.length > 0">
                 <p-divider />

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
@@ -85,6 +85,7 @@ watch(() => storeState.serviceId, async (id) => {
     <div class="service-detail-tabs-settings-event-rule pt-6 pb-10">
         <p-data-loader :loading="state.loading"
                        :data="!storeState.showEventRuleFormCard ? storeState.items : true"
+                       class="loader"
         >
             <div class="content-wrapper flex gap-1">
                 <service-detail-tabs-settings-event-rule-sidebar :hide-sidebar.sync="state.hideSidebar"
@@ -127,6 +128,9 @@ watch(() => storeState.serviceId, async (id) => {
 
 <style scoped lang="postcss">
 .service-detail-tabs-settings-event-rule {
+    .loader {
+        min-height: 23.125rem;
+    }
     .content-wrapper {
         align-items: flex-start;
     }

diff --git a/apps/web/src/services/alert-manager/components/ServiceList.vue b/apps/web/src/services/alert-manager/components/ServiceList.vue
@@ -125,6 +125,7 @@ onMounted(async () => {
         <p-data-loader :loading="state.loading"
                        :data="state.serviceList"
                        loader-backdrop-color="transparent"
+                       class="loader-wrapper"
         >
             <div class="flex flex-col gap-4">
                 <service-list-content :list="state.alertServiceList"
@@ -162,3 +163,11 @@ onMounted(async () => {
         </p-data-loader>
     </div>
 </template>
+
+<style scoped lang="postcss">
+.service-list {
+    .loader-wrapper {
+        min-height: 13.75rem;
+    }
+}
+</style>