Pre-render loader in SSR environments
karolis-sh opened this issue · comments
👋
I use the loader prop to show identical width + height box until the actual svg gets inlined. But on SSR environment null gets pre-rendered (due to https://github.com/gilbarbara/react-inlinesvg/blob/master/src/index.tsx#L386 ). I'd like the pre-rendered html to have the loader element to prevent content jumps when the JS gets loaded on the client side. Would you consider this as a desired functionality?
Hey,
This library depends on the DOM to parse and render the SVGs so I don't see how it could work with SSR without adding overhead for most users that don't need it.
How about creating a wrapper that renders this box for SSR and changes to the SVG component on the browser?
I totally understand the fact that this component can only be properly rendered on the client side. I could make a wrapper around the library, but since you're already checking canUseDOM() I think it makes sense to return the loader node in SSR environments. As pragmatically speaking a loader is something that should be rendered before the svg is inlined and I thought that pre-rendering the loader in SSR would make more sense than returning null.
Feel free to submit a PR.
Make sure it doesn't break any existing tests and doesn't increase the bundle size
It will be available in 2.0.0