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"; import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
export default function PDFViewer(props) { export default function PDFViewer(props) {
const [file, setFile] = useState("./sample.pdf"); const [file, setFile] = useState("");
const [numPages, setNumPages] = useState(null); const [numPages, setNumPages] = useState(null);
const [loading, setLoading] = useState(true);
function onFileChange(event) { function onFileChange(event) {
setFile(event.target.files[0]); setFile(event.target.files[0]);
@ -21,7 +22,7 @@ export default function PDFViewer(props) {
return ( return (
<> <>
<div className=""> <div hidden={loading}>
<Document <Document
file={props.pdfUrl} file={props.pdfUrl}
onLoadSuccess={onDocumentLoadSuccess} onLoadSuccess={onDocumentLoadSuccess}
@ -34,10 +35,29 @@ export default function PDFViewer(props) {
pageNumber={index + 1} pageNumber={index + 1}
renderAnnotationLayer={false} renderAnnotationLayer={false}
renderTextLayer={false} renderTextLayer={false}
onLoadSuccess={() => setLoading(false)}
onRenderError={() => setLoading(false)}
/> />
))} ))}
</Document> </Document>
</div> </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 DocumentsPage: NextPageWithLayout = (req, res) => {
const router = useRouter(); const router = useRouter();
const [documents, setDocuments] = useState([]); const [documents = [], setDocuments] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
getDocuments(); getDocuments();
}); }, []);
const getDocuments = async () => { const getDocuments = async () => {
setLoading(true);
fetch("/api/documents", { fetch("/api/documents", {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@ -27,6 +29,7 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
}).then((res) => { }).then((res) => {
res.json().then((j) => { res.json().then((j) => {
setDocuments(j); setDocuments(j);
setLoading(false);
}); });
}); });
}; };
@ -67,7 +70,27 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
<Head> <Head>
<title>Documents | Documenso</title> <title>Documents | Documenso</title>
</Head> </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 sm:items-center mt-10">
<div className="sm:flex-auto"> <div className="sm:flex-auto">
<header> <header>
@ -176,7 +199,7 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
<div <div
className="text-center mt-24" className="text-center mt-24"
id="empty" id="empty"
hidden={documents.length > 0} hidden={documents.length > 0 || loading}
> >
<svg <svg
className="mx-auto h-12 w-12 text-gray-400" className="mx-auto h-12 w-12 text-gray-400"