From 4042ed000d3fe78b1f1451897d584029307eb22d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 14:53:55 +0900
Subject: [PATCH] chore: apply loading min-height

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../alert-manager/components/AlertDetailTabsTimeline.vue | 1 +
 .../components/ServiceDetailTabsSettingsEventRule.vue    | 4 ++++
 .../services/alert-manager/components/ServiceList.vue    | 9 +++++++++
 3 files changed, 14 insertions(+)

diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue
index d34630d264..7f8a15580f 100644
--- 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
index 26054f4fbf..579b185954 100644
--- 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
index 1036f57044..04f70db2d9 100644
--- 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>