#react-pdf/renderer how to check the loading state of the document? - reactjs

Question

so im generating a pdf using some data and rendering the pdf with the PDFViewer, but im generating more than 10 pages and i want to show a loading state before the document generated, i cannot find anything related to loading state, im I missing something ??? here is my component
<PDFViewer width={1000} height={1000}>
<Document>
{products &&
chunks.map((ele, i) => {
return (
<Page size="A4" style={styles.page}>
<View style={styles.container}>
<View style={styles.head}>
<View style={styles.head1}>
<Text style={styles.title}>Pharmacie Salim</Text>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/phone-icon.png").default}
/>
<Text style={styles.cardText}>05 30 50 05 00</Text>
</View>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/email-icon.png").default}
/>
<Text style={styles.cardText}>demointern#sobrus.com</Text>
</View>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/gps-icon.png").default}
/>
<Text style={styles.cardText}>Villa No 222, Rue Tetouan</Text>
</View>
</View>
<View style={styles.head2}>
<Text style={styles.type}>
Chiffre d'affaires par famille tarifaire (Catégorie et TVA)
</Text>
<View style={styles.head2Cards}>
<View style={styles.headCard}>
<Image
style={styles.image2}
src={require("../assets/timer-icon.png").default}
/>
<View style={styles.cardInfo}>
<Text style={styles.cardTextHead}>Période</Text>
<Text style={styles.cardTextBody}>
De 2021-03-02 à 2021-04-05
</Text>
</View>
</View>
<View style={styles.headCard}>
<Image
style={styles.image2}
src={require("../assets/printer-icon.png").default}
/>
<View style={styles.cardInfo}>
<Text style={styles.cardTextHead}>Imprimé le</Text>
<Text style={styles.cardTextBody}>2021-03-02</Text>
</View>
</View>
</View>
</View>
</View>
<View style={styles.table}>
<View style={styles.rowHeader}>
<View style={styles.colFirst}>
<Text style={styles.th}>Période</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>No de transaction</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Client</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total avant remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Non payé</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Gestionnaire</Text>
</View>
</View>
{ele.map((prod) => (
<View style={styles.row}>
<View style={styles.colFirst}>
<Text style={styles.th}>{prod.name}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.purchase_price}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.salePrice}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.supplier?.name}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Non payé</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Gestionnaire</Text>
</View>
</View>
))}
</View>
</View>
</Page>
);
})}
</Document>
</PDFViewer>
so how can i show a loader before the document finish rendering ?

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div style={{position:"relative"}}>
<div style={{margin: "auto",fontSize:"2rem", color:"#000",width:"100%",height:"70vh",display:"flex",justifyContent:"center",alignItems:"center"}}>Your loading message...</div>
<PDFViewer showToolbar={false} style={{width:"100%",height:"100%",height:"70vh",border:"none",backgroundColor:"transparent",position:"absolute",left:"0",top:"0"}} >
//Your content
</PDFViewer>
</div>