commit

components/Extras/calendar.view.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Card, CardBody, CardHeader, CardTitle, Button } from "reactstrap";
+import { Card, CardBody, CardHeader, CardTitle, Button, Row, Col } from "reactstrap";
 import { getPelaporan, addStatus, removeLaporan, activeLaporan, changeRoleData } from "@/actions/pelaporan";
 import { updateJadwal } from "@/actions/penjadwalan";
 import DetailLaporan from "@/components/Main/DetailLaporan";
@@ -15,6 +15,7 @@ import events from "./calendar.events";
 import Select from "react-select";
 import moment from "moment";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 const status = [
 	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
@@ -178,13 +179,23 @@ class Calendar extends Component {
 					</div>
 				</div>
 				<div className="calendar-app">
-					<div class="row">
-						<div class="col">
-							<Card className="card-default">
-								<CardBody>{laporan.data && <DetailLaporan noStatus query={this.props.query} data={laporan.data[0]} handleChangeSelect={this.handleChangeSelect} />}</CardBody>
-							</Card>
-						</div>
-					</div>
+					{laporan.data ? (
+						<Row>
+							<Col>
+								<Card className="card-default">
+									<CardBody>
+										<DetailLaporan noStatus query={this.props.query} data={laporan.data[0]} handleChangeSelect={this.handleChangeSelect} />
+									</CardBody>
+								</Card>
+							</Col>
+						</Row>
+					) : (
+						<Row className="mb-4">
+							<Col>
+								<Loader />
+							</Col>
+						</Row>
+					)}
 					<div className="row">
 						<div className="col-xl-4 col-lg-5">
 							<div className="row">

pages/app/pelaporan/detail.js

@@ -6,6 +6,7 @@ import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
 
 class DetailPelaporan extends Component {
 	constructor(props) {
@@ -41,15 +42,19 @@ class DetailPelaporan extends Component {
 					</div>
 					<Row>
 						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>{pelaporan.data && <DetailLaporan data={pelaporan.data[0]} />}</Col>
-									</Row>
-								</CardBody>
-							</Card>
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>{<DetailLaporan data={pelaporan.data[0]} />}</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
 						</Col>
-						<Col xl="3">{pelaporan.data && <DetailPT data={pelaporan.data[0].pt} />}</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data[0].pt} /> : <Loader />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pelaporan/index.js

@@ -6,6 +6,7 @@ import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -42,7 +43,7 @@ class Pelaporan extends Component {
 								</Link>
 							</div>
 						</div>
-						<TableLaporan listData={pelaporan?.data} to="/app/pelaporan/detail" linkName="Detail" />
+						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pelaporan/new.js

@@ -7,6 +7,7 @@ import { getPT } from "@/actions/PT";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
 
 class PelaporanNew extends Component {
 	constructor(props) {
@@ -35,7 +36,7 @@ class PelaporanNew extends Component {
 					<div className="content-heading">
 						<div>
 							Pelaporan Baru
-							<small>Form pembuatan laporan baru v.0.1</small>
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
 						</div>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan/search">
@@ -56,7 +57,7 @@ class PelaporanNew extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
+						<Col xl="3">{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pemantauan/timeline.js

@@ -7,6 +7,7 @@ import { Row, Col } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { getPT } from "@/actions/PT";
 import Link from "next/link";
+import Loader from "@/components/Common/Loader";
 
 class Pemantauan extends Component {
 	constructor(props) {
@@ -44,14 +45,8 @@ class Pemantauan extends Component {
 						</div>
 					</div>
 					<Row>
-						{log?.data ? (
-							<Col xl="9">
-								<Timeline data={log.data} />
-							</Col>
-						) : (
-							"Loading..."
-						)}
-						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
+						<Col xl="9">{log?.data ? <Timeline data={log.data} /> : <Loader />}</Col>
+						<Col xl="3">{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/penjadwalan/index.js

@@ -5,6 +5,7 @@ import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class Penjadwalan extends Component {
 	constructor(props) {
@@ -31,9 +32,7 @@ class Penjadwalan extends Component {
 					<Col lg="4">
 						<CaseProgress />
 					</Col>
-					<Col lg="8">
-						<TableLaporan listData={pelaporan?.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" />
-					</Col>
+					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);