Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +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>
</>
);
}

31
apps/web/pages/documents.tsx
View File

@ -13,13 +13,15 @@ import toast from "react-hot-toast";
const DocumentsPage: NextPageWithLayout = (req, res) => {
const router = useRouter();
const [documents, setDocuments] = useState([]);
const [documents = [], setDocuments] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
getDocuments();
});
}, []);
const getDocuments = async () => {
setLoading(true);
fetch("/api/documents", {
headers: {
"Content-Type": "application/json",
@ -27,6 +29,7 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
}).then((res) => {
res.json().then((j) => {
setDocuments(j);
setLoading(false);
});
});
};
@ -67,7 +70,27 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
<Head>
<title>Documents | Documenso</title>
</Head>
<div className="px-4 sm:px-6 lg:px-8" hidden={!documents.length}>
<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>
<div
className="px-4 sm:px-6 lg:px-8"
hidden={!documents.length || loading}
>
<div className="sm:flex sm:items-center mt-10">
<div className="sm:flex-auto">
<header>
@ -176,7 +199,7 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
<div
className="text-center mt-24"
id="empty"
hidden={documents.length > 0}
hidden={documents.length > 0 || loading}
>
<svg
className="mx-auto h-12 w-12 text-gray-400"