Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

loading ux

Browse Source
This commit is contained in:
Timur Ercan
2023-01-24 19:10:24 +01:00
parent d463c45f76
commit 138d28416f
2 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/components/pdf-viewer.js
View File

@ -2,8 +2,9 @@ import { useState } from "react";
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
export default function PDFViewer(props) {
const [file, setFile] = useState("./sample.pdf");
const [file, setFile] = useState("");
const [numPages, setNumPages] = useState(null);
const [loading, setLoading] = useState(true);
function onFileChange(event) {
setFile(event.target.files[0]);
@ -21,7 +22,7 @@ export default function PDFViewer(props) {
return (
<>
<div className="">
<div hidden={loading}>
<Document
file={props.pdfUrl}
onLoadSuccess={onDocumentLoadSuccess}
@ -34,10 +35,29 @@ export default function PDFViewer(props) {
pageNumber={index + 1}
renderAnnotationLayer={false}
renderTextLayer={false}
onLoadSuccess={() => setLoading(false)}
onRenderError={() => setLoading(false)}
/>
))}
</Document>
</div>
<div className="mt-10" hidden={!loading}>
<div className="ph-item">
<div className="ph-col-12">
<div className="ph-picture"></div>
<div className="ph-row">
<div className="ph-col-6 big"></div>
<div className="ph-col-4 empty big"></div>
<div className="ph-col-2 big"></div>
<div className="ph-col-4"></div>
<div className="ph-col-8 empty"></div>
<div className="ph-col-6"></div>
<div className="ph-col-6 empty"></div>
<div className="ph-col-12"></div>
</div>
</div>
</div>
</div>
</>
);
}