Fix/balance warning delay

[Rendevor-ling]

The insufficient-balance banner flickered on modal load: it stored
isVisible in state (starting false) and toggled it through three
competing effects, each of which also re-triggered the CSS entrance
animation. On mount the banner painted hidden, then flipped visible a
frame later — a visible race whenever the balance was already known.

Fix at the owner layer (the component) by deriving visibility during
render instead of storing it:

• Compute isInsufficient/isVisible every render from the balance the
  hook exposes; a pre-fetched low balance now paints on the first frame.
• Prefer optimisticBalance (synchronous service cache) over the network
  result when showImmediately is set, so no round-trip is awaited.
• Remove all three visibility effects and both timer refs — with nothing
  stored, there is nothing left to race or re-animate.
• Keep the only genuine local state, the user's explicit dismissed.
• Guard the balance read with != null so an undefined/empty fetch can
  never throw during render.
• Reserve a fixed 60px slot (container minHeight + hidden spacer) so
  mounting/unmounting the banner never shifts surrounding layout (CLS 0).

Balance fetching still runs in parallel with mount via the hook's
autoFetch/fetchOnMount path, and the Component → Hook → Service layering
and backend-API data source are preserved.

Closes #300

[johdanike]

Please resolve conflicts

[johdanike]

Please resolve conflicts in existing pr

[drips-wave]

@Rendevor-ling Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits