fix: cleanup ssr markup mismatch errors

[davisshaver]

Currently some markup depends on client-side requests (or local storage caches). This can cause mismatch errors with Next.js server-side rendering. One way we can minimize these errors is wrapping into an isLoaded conditional with useEffect.

Example error:

next-dev.js?d62b:32 Warning: Text content did not match. Server: "??" Client: "3"
    at p
    at div
    at div
    at HomePage (webpack-internal:///./src/pages/index.tsx:18:92)

[holic]

@tmm Do ya'll have any advice for wagmi localStorage caching + Next.js server side rendering having incompatible content during hydration? Feels weird bypassing server rendering but not sure the implication of these sorts of rehydration errors. Is this the right approach?

[davisshaver]

@holic I dug into this some more and found a previous convo in the wagmi repo here: wevm/wagmi#542 (comment)

I've updated this branch to use a similar pattern of a reusable useIsMounted hook rather than duplicating that code throughout components.

[tmm]

@holic thinking about this currently cc @jxom

[holic]

Small nit: I tend to prefer full ternaries like {condition ? (<>render</>) : null} as it avoids the edge case where your condition might not be a boolean and will unintentionally render the condition value itself.

Not sure if there is a linter for this kind of thing. I feel like I wrote one for this pattern at Stripe but I don't have the code anymore.

[davisshaver]

@holic Cool, I hadn't thought about this much before but I agree. I wasn't able to find an existing rule for this, although there is one proposed here that we might be able to use: jsx-eslint/eslint-plugin-react#2888

I made #29 so we can track this in backlog