Feat/Component: add Loading Component

Author: gitgitWi

src/components/highcharts/TreemapChart.vue

@@ -4,7 +4,9 @@
       :current-category.sync="currentDataKey"
       @click-button="tabButtonClickHandler"
     />
+    <loading-component v-if="isLoading" />
     <highcharts
+      v-else
       id="container"
       :options="chartOptions"
       :deep-copy-on-update="true"
@@ -23,17 +25,19 @@ import {
 import { getChartOptions } from "@/components/highcharts/options";
 import { refineSectorData } from "@/components/highcharts/utils";
 
+import { LoadingComponent } from "@/components/loading";
 import CategoryTab from "./CategoryTab.vue";
 
 export default Vue.extend({
   name: "TreemapChart",
 
-  components: { CategoryTab },
+  components: { CategoryTab, LoadingComponent },
 
-  data(): Record<string, unknown> {
+  data() {
     return {
       chartOptions: {},
       currentDataKey: DataKeys.KosdaqBlue,
+      isLoading: true,
     };
   },
 
@@ -47,19 +51,19 @@ export default Vue.extend({
       const category =
         categoryKeys.find((key) => dataKey.toLowerCase().includes(key)) ?? `ko`;
 
+      const dataPromise =
+        dummyDataMap?.[category] ??
+        Promise.all([dummyDataMap.kospi, dummyDataMap.kosdaq]);
+
       // @ts-ignore
-      const data = refineSectorData(
-        (await dummyDataMap?.[category]) ??
-          (await Promise.all([dummyDataMap.kospi, dummyDataMap.kosdaq])).flat(
-            1
-          ),
-        { dataKey }
-      );
+      const data = refineSectorData((await dataPromise).flat(), { dataKey });
+      if (!data.length) return;
 
       this.chartOptions = getChartOptions(data);
+      this.isLoading = false;
     },
 
-    tabButtonClickHandler(dataKey: string) {
+    tabButtonClickHandler(dataKey: DataKeys) {
       this.currentDataKey = dataKey;
       this.loadChartData();
     },

src/components/loading/Loading.vue

@@ -0,0 +1,48 @@
+<template>
+  <section>데이터를 가져오는 중입니다...!!</section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  name: "LoadingComponent",
+});
+</script>
+
+<style lang="scss" scoped>
+section {
+  box-sizing: border-box;
+  width: 75vw;
+  max-width: 1200px;
+  height: 40vh;
+  max-height: 1200px;
+  margin: 15px;
+
+  display: grid;
+  place-content: center;
+
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 900;
+  font-style: italic;
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.8)
+  );
+  background-size: 500% 500%;
+  border-radius: 15px;
+  animation: gradient 4s ease-in-out infinite;
+
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+</style>

src/components/loading/index.ts

@@ -0,0 +1,3 @@
+import { VueType } from "@/types";
+
+export const LoadingComponent = (): Promise<VueType> => import("./Loading.vue");