commit

pages/app/pt/dokumen-perbaikan/detail.js

@@ -11,6 +11,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
 import { connect } from "react-redux";
 import { notifDocPerbaikan } from "@/actions/notifikasi";
+import Loader from "@/components/Common/Loader";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -119,64 +120,65 @@ class DetailPerbaikanDoc extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											<p className="lead bb">Dokumen Perbaikan</p>
-											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-												<FormGroup>
-													<label className="row-form-label">Keterangan:</label>
-													<div className="row-md-10">
-														<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
-														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label className="row-form-label">Upload Dokumen:</label>
-													<div className="row-md-10">
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<p className="lead bb">Dokumen Perbaikan</p>
+												<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+													<FormGroup>
+														<label className="row-form-label">Keterangan:</label>
+														<div className="row-md-10">
+															<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label className="row-form-label">Upload Dokumen:</label>
+														<div className="row-md-10">
+															<DropzoneWrapper className="" onDrop={this.onDrop}>
+																{({ getRootProps, getInputProps, isDragActive }) => {
+																	return (
+																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																			<input {...getInputProps()} />
+																			<div className="dropzone-previews flex">
+																				{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																			</div>
+																			<div className="d-flex align-items-center">
+																				<small className="ml-auto">
+																					<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																						Clear files
+																					</button>
+																				</small>
+																			</div>
 																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
-																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<div className="row-xl-10">
-														<Button color="primary" onClick={this.handleKirim} type="submit">
-															Kirim
-														</Button>
-													</div>
-												</FormGroup>
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+																	);
+																}}
+															</DropzoneWrapper>
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<div className="row-xl-10">
+															<Button color="primary" onClick={this.handleKirim} type="submit">
+																Kirim
+															</Button>
+														</div>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi?.data && sanksi.data[0].sanksi.doc_perbaikan} />
-						</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pt/dokumen-perbaikan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/TableSanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -26,7 +27,7 @@ class Pelaporan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Dokumen Perbaikan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data && sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/dokumen-perbaikan/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/dokumen-perbaikan/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/jawaban-banding/detail.js

@@ -9,6 +9,7 @@ import Link from "next/link";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import { connect } from "react-redux";
 import { withRouter } from "next/router";
+import Loader from "@/components/Common/Loader";
 
 class JawabanBanding extends Component {
 	constructor(props) {
@@ -41,18 +42,22 @@ class JawabanBanding extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											{sanksi?.data && <DetailJawaban data={sanksi.data[0]} />}
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<DetailJawaban data={sanksi.data[0]} />
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 				</div>

pages/app/pt/jawaban-banding/index.js

@@ -4,6 +4,8 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/JawabanBanding/TableSanksiJawaban";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
 class JawabanKeberatan extends Component {
 	constructor(props) {
 		super(props);
@@ -25,7 +27,7 @@ class JawabanKeberatan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Banding</div>
 				<Row>
-					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-banding/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-banding/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/jawaban-keberatan/detail.js

@@ -11,6 +11,7 @@ import Link from "next/link";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import { connect } from "react-redux";
 import { withRouter } from "next/router";
+import Loader from "@/components/Common/Loader";
 
 class JawabanKeberatan extends Component {
 	constructor(props) {
@@ -52,33 +53,36 @@ class JawabanKeberatan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											{sanksi?.data && <DetailJawaban data={sanksi.data[0]} />}
-											{sanksi?.data &&
-												sanksi.data[0].sanksi.keberatan.jawaban.status !== "Membatalkan Keputusan" &&
-												(new Date(sanksi.data[0].sanksi.close_banding).getTime() > Date.now() ? (
-													<>
-														<p>
-															Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan
-															tombol di bawah ini paling lambat {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}
-														</p>
-														<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
-															Ajukan Banding
-														</Button>
-													</>
-												) : (
-													<p>Pengajuan ditutup</p>
-												))}
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<DetailJawaban data={sanksi.data[0]} />
+												{sanksi.data[0].sanksi.keberatan.jawaban.status !== "Membatalkan Keputusan" &&
+													(new Date(sanksi.data[0].sanksi.close_banding).getTime() > Date.now() ? (
+														<>
+															<p>
+																Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat
+																menekan tombol di bawah ini paling lambat {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}
+															</p>
+															<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
+																Ajukan Banding
+															</Button>
+														</>
+													) : (
+														<p>Pengajuan ditutup</p>
+													))}
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>

pages/app/pt/jawaban-keberatan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/JawabanKeberatan/TableSanksiJawaban";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class JawabanKeberatan extends Component {
 	constructor(props) {
@@ -26,7 +27,7 @@ class JawabanKeberatan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : ""} </Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : <Loader />} </Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/jawaban-pencabutan-sanksi/detail.js

@@ -8,6 +8,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Scrollable from "@/components/Common/Scrollable";
 import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class DetailJawabanPencabutanSanksi extends Component {
 	constructor(props) {
@@ -45,56 +46,60 @@ class DetailJawabanPencabutanSanksi extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											<p className="lead bb">Jawaban Permohonan Pencabutan Sanksi</p>
-											<form className="form-horizontal">
-												<FormGroup>
-													<label md="4">Jawaban:</label>
-													<div md="8">
-														<h3>{jawaban && jawaban.status}</h3>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label md="4">Keterangan:</label>
-													<div md="8">
-														<p>{jawaban && jawaban.description}</p>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label md="4">Dokumen Jawaban:</label>
-													<div md="8">
-														<Scrollable height="120px" className="list-group">
-															<table className="table table-bordered bg-transparent">
-																<tbody>
-																	{jawaban &&
-																		jawaban.files.map((e) => (
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-code"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
-																						{e.name}
-																					</a>
-																				</td>
-																			</tr>
-																		))}
-																</tbody>
-															</table>
-														</Scrollable>
-													</div>
-												</FormGroup>
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
+												<p className="lead bb">Jawaban Permohonan Pencabutan Sanksi</p>
+												<form className="form-horizontal">
+													<FormGroup>
+														<label md="4">Jawaban:</label>
+														<div md="8">
+															<h3>{jawaban && jawaban.status}</h3>
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label md="4">Keterangan:</label>
+														<div md="8">
+															<p>{jawaban && jawaban.description}</p>
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label md="4">Dokumen Jawaban:</label>
+														<div md="8">
+															<Scrollable height="120px" className="list-group">
+																<table className="table table-bordered bg-transparent">
+																	<tbody>
+																		{jawaban &&
+																			jawaban.files.map((e) => (
+																				<tr>
+																					<td>
+																						<em className="fa-lg far fa-file-code"></em>
+																					</td>
+																					<td>
+																						<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																							{e.name}
+																						</a>
+																					</td>
+																				</tr>
+																			))}
+																	</tbody>
+																</table>
+															</Scrollable>
+														</div>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 				</div>

pages/app/pt/jawaban-pencabutan-sanksi/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/JawabanPencabutanSanksi/TableSanksiJawaban";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class JawabanCabutSanksi extends Component {
 	constructor(props) {
@@ -26,7 +27,7 @@ class JawabanCabutSanksi extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
 				<Row>
-					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/keberatan/detail.js

@@ -11,6 +11,8 @@ import moment from "moment";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import { connect } from "react-redux";
 import { withRouter } from "next/router";
+import Loader from "@/components/Common/Loader";
+
 class Keberatan extends Component {
 	state = {
 		modal: false,
@@ -48,14 +50,14 @@ class Keberatan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											{sanksi?.data &&
-												(new Date(sanksi.data[0].sanksi.close_keberatan).getTime() > Date.now() ? (
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												{new Date(sanksi.data[0].sanksi.close_keberatan).getTime() > Date.now() ? (
 													<>
 														<p>
 															Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini paling lambat{" "}
@@ -67,12 +69,15 @@ class Keberatan extends Component {
 													</>
 												) : (
 													<p>Pengajuan ditutup</p>
-												))}
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+												)}
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>

pages/app/pt/keberatan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/TableSanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 class Keberatan extends Component {
 	constructor(props) {
 		super(props);
@@ -25,7 +26,7 @@ class Keberatan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Keberatan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/app/pt/keberatan/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/app/pt/keberatan/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/pencabutan-sanksi/detail.js

@@ -10,6 +10,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
 import { addCabutSanksi } from "@/actions/cabutSanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -114,58 +115,66 @@ class DetailPencabutanSanksi extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
-											<p className="lead bb">Permohonan Pencabutan Sanksi</p>
-											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-												<FormGroup>
-													<label className="row-form-label">Upload Dokumen:</label>
-													<div className="row-md-10">
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+						{sanksi?.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<p className="lead bb">Permohonan Pencabutan Sanksi</p>
+												<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+													<FormGroup>
+														<label className="row-form-label">Upload Dokumen:</label>
+														<div className="row-md-10">
+															<DropzoneWrapper className="" onDrop={this.onDrop}>
+																{({ getRootProps, getInputProps, isDragActive }) => {
+																	return (
+																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																			<input {...getInputProps()} />
+																			<div className="dropzone-previews flex">
+																				{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																			</div>
+																			<div className="d-flex align-items-center">
+																				<small className="ml-auto">
+																					<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																						Clear files
+																					</button>
+																				</small>
+																			</div>
 																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
-																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													{sanksi?.data && (
-														<div className="row-xl-10">
-															<Button color="primary" onClick={this.handleKirim} disabled={sanksi.data[0].sanksi.cabut_sanksi || false} type="submit">
-																Kirim
-															</Button>
+																	);
+																}}
+															</DropzoneWrapper>
 														</div>
-													)}
-												</FormGroup>
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
+													</FormGroup>
+													<FormGroup>
+														{sanksi?.data && (
+															<div className="row-xl-10">
+																<Button color="primary" onClick={this.handleKirim} disabled={sanksi.data[0].sanksi.cabut_sanksi || false} type="submit">
+																	Kirim
+																</Button>
+															</div>
+														)}
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
-					<Row>
-						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
-					</Row>
+					{sanksi?.data && (
+						<Row>
+							<Col>
+								<Riwayat data={sanksi.data[0]} />
+							</Col>
+						</Row>
+					)}
 				</div>
 			</ContentWrapper>
 		);

pages/app/pt/pencabutan-sanksi/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/TableSanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
@@ -26,7 +27,7 @@ class PencabutanSanksi extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
 				<Row>
-					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/pencabutan-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);