대시보드 수정(차트 표시전 로딩 이미지 추가)

src/main/webapp/WEB-INF/jsp/include/dashboard.jsp

@@ -87,7 +87,7 @@
 	        <h5 class="card-title m-0 me-2">단속 자료 통계(유형별)</h5>
 	        <div>건수(최근 n일)</div>
 	    </div>
-	    <div class="card-body">
+	    <div class="card-body d-flex justify-content-center" id="lineChartCardBody">
 	        <canvas id="lineChart" class="chartjs" data-height="500" style="max-height: 300px;"></canvas>
 	    </div>
 	    <div class="card-footer ms-auto">
@@ -100,7 +100,7 @@
 	        <h5 class="card-title m-0 me-2">단속통계</h5>
 	        <div>처리유형별(일별)</div>
 	    </div>
-	    <div class="card-body">
+	    <div class="card-body d-flex justify-content-center" id="doughnutChart1CardBody">
 	        <canvas id="doughnutChart1" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
 	    </div>
 	    <div class="card-footer ms-auto">
@@ -113,7 +113,7 @@
 	        <h5 class="card-title m-0 me-2">발송통계</h5>
 	        <div>발송유형별(일별)</div>
 	    </div>
-	    <div class="card-body">
+	    <div class="card-body d-flex justify-content-center" id="doughnutChart2CardBody">
 	        <canvas id="doughnutChart2" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
 	    </div>
 	    <div class="card-footer ms-auto">
@@ -126,7 +126,7 @@
 	        <h5 class="card-title m-0 me-2">의견진술통계</h5>
 	        <div>처리유형별(일별)</div>
 	    </div>
-	    <div class="card-body">
+	    <div class="card-body d-flex justify-content-center" id="doughnutChart3CardBody">
 	        <canvas id="doughnutChart3" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
 	    </div>
 	    <div class="card-footer ms-auto">
@@ -136,6 +136,63 @@
 </div>
 
 <c:set var="dashboardScript" scope="request">
+
+var falseLineChart = `<svg xmlns="http://www.w3.org/2000/svg" 
+height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
+<path class="skeleton" d="M3 3v17a1 1 0 0 0 1 1h17v-2H5V3H3z"></path>
+<path class="skeleton" d="M15.293 14.707a.999.999 0 0 0 1.414 0l5-5-1.414-1.414L16 12.586l-2.293-2.293a.999.999 0 0 0-1.414 0l-5 5 1.414 1.414L13 12.414l2.293 2.293z"></path>
+</svg>`;
+
+var falseDoughnutChart = `<svg xmlns="http://www.w3.org/2000/svg" 
+height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
+<path class="skeleton" d="M13 6c2.507.423 4.577 2.493 5 5h4c-.471-4.717-4.283-8.529-9-9v4z"></path>
+<path class="skeleton" d="M18 13c-.478 2.833-2.982 4.949-5.949 4.949-3.309 0-6-2.691-6-6C6.051 8.982 8.167 6.478 11 6V2c-5.046.504-8.949 4.773-8.949 9.949 0 5.514 4.486 10 10 10 5.176 0 9.445-3.903 9.949-8.949h-4z"></path>
+</svg>`;
+
+fnMakeSkeleton();
+sleep(3000).then(() => fnLoadStatisticsData());
+
+
+//지연
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+//데이터 로딩 전 이미지 표시
+function fnMakeSkeleton(){
+
+	$("#lineChart").hide();
+	$("#doughnutChart1").hide();
+	$("#doughnutChart2").hide();
+	$("#doughnutChart3").hide();
+	
+	$("#lineChartCardBody").append(falseLineChart);
+	$("#doughnutChart1CardBody").append(falseDoughnutChart);
+	$("#doughnutChart2CardBody").append(falseDoughnutChart);
+	$("#doughnutChart3CardBody").append(falseDoughnutChart);
+}
+
+//통계 데이터 조회
+function fnLoadStatisticsData(){
+
+	//TODO : ajax
+
+	var data = {};
+	fnRenderDashboardContents(data);
+}
+
+//콘텐츠(차트) 표시
+function fnRenderDashboardContents(data){
+		$("#lineChartCardBody svg").remove();
+		$("#doughnutChart1CardBody svg").remove();
+		$("#doughnutChart2CardBody svg").remove();
+		$("#doughnutChart3CardBody svg").remove();
+	
+		$("#lineChart").show();
+		$("#doughnutChart1").show();
+		$("#doughnutChart2").show();
+		$("#doughnutChart3").show();
+		
 		// Color Variables
 	    const yellowColor = '#ffe800';
 	    let borderColor, gridColor, tickColor;
@@ -409,4 +466,7 @@
 	            }
 	        });
 	    }
+}
+
+
 </c:set>

src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css

@@ -101,6 +101,18 @@
     grid-row: span 3;
 }
 
+@keyframes skeleton-loading {
+	0% { fill: #f2f2f2; }
+    25% { fill: #c1c1c1; }
+    50% { fill: #a1a1a1; }
+    75% { fill: #c1c1c1; }
+    100% { fill : #f2f2f2; }
+}
+
+.skeleton {
+	animation: skeleton-loading 1s infinite;
+}
+
 .wrapper-list {
     height: 790px;
     overflow-y:scroll;