Closed Joel-Valentine closed 2 months ago
Hey, I've got COVID right now, but I'll take a look at this as soon as I can think straight.
The one thing I'll suggest right off the bat is to use the useEffect method, but also move the import there as a dynamic import.
const { quantum } = await import('ldrs')
There's a complete example of this in the NextJS guide.
Your pointers helped massively, thanks! Here is what I settled with. I think this technically means there could be a small delay before the loader shows? I'm unsure exactly how NextJS deals with this. But it works now! Thanks.
import { useEffect } from 'react'
import styles from './LoadingPage.module.css'
const registerQuantumLoader = async () => {
const { quantum } = await import('ldrs')
quantum.register()
}
const LoadingPage = () => {
useEffect(() => {
registerQuantumLoader()
}, [])
return (
<div className={styles.container}>
<l-quantum size="60" speed="1.75" color="#282828" />
</div>
)
}
export default LoadingPage
All works now
Happy to help! I'm actually planning to add React components back to this library at some point. Frameworks like Next just don't play nice with web components unfortunately, so the DX suffers.
Vercel build logs:
This error also happens locally.
Heres my very basic LoadingPage component:
What I've tried:
use client
at the top of the fileuseEffect