Visually incorrect relative representation of the STREAMING and DEPLETED hourglasses

[IaroslavMazur]

The current way of visually representing the STREAMING and DEPLETED is confusing to the user, because the fluidity of the matter inside the hourglass (representing a Stream) is visually incorrect (relative to the 2 Stream states): instead of flowing, in its entirety, to the bottom half of the hourglass, the matter seems to be evaporating/disappearing from inside the hourglass as the time goes by (STREAMING -> DEPLETED).

Here are the referenced images:

[PaulRBerg]

Thanks for this, @IaroslavMazur.

I agree that the lower-bulb sand in the DEPLETED status should be relatively bigger than in the STREAMING status.

However, this is not as confusing as you suggest. You've only noticed this because you have carefully reviewed the code base; the transition from STREAMING to DEPLETED is not something that users will observe every day. It's a single event that only happens once.

[IaroslavMazur]

@PaulRBerg, that's a fair point! In the context of a single Stream, the user will, most likely, not be confused by the visual discrepancy described above.

What if that user has multiple Streams in different states at the same time, though (which would not be an unnatural thing, at all)?

Moreover, from the moment of having a single user's Stream reaching the DEPLETED state, any new Stream created will result in the user, potentially, being confused by the issue at hand, as both of the Streams will be visible to the user (unless you're intending to somehow hide the DEPLETED ones, which would be unfair to the user, anyways, IMO).

[PaulRBerg]

Touché.

it will actually be fairly common to look at a user's gallery of streams, e.g. when filtering by owner address on OpenSea, and in marketing campaigns! So your feedback is great.

@razgraf, would it be difficult to adjust the lower bulb slightly?

definitely not a top priority but it's be nice to make this adjustment if we find a moment.

We have a limited time window with Cantina over the next week, so it's now or never.

[razgraf]

The sand paths themselves aren't easy to adjust. Alternative: a new separate path for the Sand at the bottom. Upon depletion, the existing ones would get hidden/removed and the new one would be shown. Additionally, the SandBottom group would be lowered.

[PaulRBerg]

Will you be able to find a moment to generate the updated lower bulb this week, @razgraf?

For context, this is where the current lower bulb is implemented:

https://github.com/sablier-labs/v2-core/blob/ef1f39480e6492aa1ed5952fb9221142ff4fb5e5/src/libraries/SVGElements.sol#L38-L39

I reckon that HOURGLASS_LOWER_BULB may have to be turned into two constants:

• HOURGLASS_LOWER_BULB_SMALL
• HOURGLASS_LOWER_BULB_BIG

Or something along these lines.

[razgraf]

Sure, will try to handle it in the next 2-3 days! Going to provide an update here once I'm done.

[razgraf]

Tracking in #560.

[IaroslavMazur]

Following #560! 😄

[PaulRBerg]

Good ser @andreivladbrg approved that PR now, merging 🚀