initial UI does not match what was rendered on the server

[paulm17]

In the docs with the complex example, the datatable uses the loader component when data is fetching.

I'm trying to get the same outcome, but when using react query if I set the suspense to false. I get the error:

Warning: Expected server HTML to contain a matching svg in div

If I turn suspense on then I get the fallback instead of seeing the loader.

How did you achieve the loader in datatable?

Video with hydration error:
https://www.loom.com/share/3cb43404c854470f9a40cc90adf5a46a

Video with default suspense:
https://www.loom.com/share/48db2df18d7c43acad19dcc27998c603

Thanks

[icflorescu]

Here's the "complex example" code:

https://github.com/icflorescu/mantine-datatable/blob/main/docs/examples/ComplexUsageExample.tsx

As you can see, it's using react query.

[paulm17]

Thanks. I'm using BlitzJS which is Next and React Query under the hood. Last question, are you using NextJS 12 or 13?

Also thanks for creating mantine-datatable. It's been an absolutely pleasure to work with!

[icflorescu]

The docs website is on Next 13, see here:
https://github.com/icflorescu/mantine-datatable/blob/main/docs/package.json

Thanks for the kind words!