#iOS loading animation 🧵

1 messages · Page 1 of 1 (latest)

thick fjord
#

🧵

lime radish
#

Probably makes sense to have an animated SVG, stops it looking like the page is frozen

#

Could probably update the about page and the website too

ancient oxide
abstract pulsar
#

This is something we can do! 🙂

thick fjord
#

Cool! I will try it with Claude, feel free to pick it up before.

ancient oxide
#

Already did, but w/o changing it in apps it's not a full picture. Apps have so called "cold boots" where there a splash and preloader can be shown, but not entirely. So if a splash screen would start with the OHF logo, we might not show the second half of it transitiong to the HA logo. @split kayak Am I correct?

split kayak
#

On iOS the splash screen is static, I can put any kind of information there but it cant be animated. To transition to something else I need to mimic a second screen that starts exactly like the splash and then animate.
What is also possible is to remove the splash completely and open with a blank screen until the webview displays the animation that you desire

abstract pulsar
thick fjord
#

Yes, my idea was to have the native and web screen the same, where the web animates.

thick fjord
kindred sage
#

We had a discussion in the past that apps are going to hide the frontend loader I think it's the way to go otherwise it's going to be hard to have a good solution that fits android and ios

thick fjord
#

Makes sense to me. We would still need to update the web too.

#

Is this something we could do in an afternoon? I would really love to improve this, because the current loading animation hurts my eyes 😆

kindred sage
#

Well @ancient oxide was working on a nice animation not so long ago. On iOS it should be rather easy to do if I remember right from what @split kayak was saying. On Android I need to finish my work on the big refactor to make it work

#

So once I'm ready yes in an afternoon it is done in theory

#

We need a small modification of the frontend that we will do when we are going to work on it

#

But if you can already provide the asset that would be awesome

split kayak
#

I don’t see why not putting it directly in the frontend first and disabling the splash in the mobile apps, if the final result is bad then we plan a native implementation.
As @thick fjord said, it needs to be done for web so, let’s start with that

kindred sage
#

sure

ancient oxide
#

So since web doesn't have a splash screen, and on a fast connection the web loader can be on for <1s currently, if the new logo anim will be longer than that 1s it won't transition from OHF -> HA. So for some users it might look like HA has rebranded it's logo to the OHF logo (I hope I have explained it clearly).

Home_Assistant_Proloader.gif
#

👆 takes ~.5s. So to prevent the case that I've described above, we could force the anim to always show for that ~.5s (which is somewhat already the case). Then if web still loads we could swap that SVG to looped SVG:

Home_Assistant_Proloader_3.gif
lime radish
#

Yeah first run fast, second run is slower sounds better

abstract pulsar
#

We can of course always await the animation, but I am not sure if that makes sense. Or we just start the ohf animation after 0.5 and then run it till the end

ancient oxide
abstract pulsar
#

it's really nice but it just takes too long. Just imagine you hit f5 and have to wait on this

ancient oxide
#

Yes the protopies have a much longer anim. The gif I posted is .45s

#

I think if we aim for <1s and "force" to show it it should be worth it. Currently if you hit F5 it's not so good also.

lime radish
#

<= 500ms is fine imo

thick fjord
#

I would keep it simple:

  • Keep the Home Assistant logo centered on the native app screens.
  • Use the same position and size for the Home Assistant logo on web.
  • Animate the Home Assistant logo from the full logo to the growing tree, then back to the full logo.
  • Place the Open Home Foundation logo at the bottom in both the native and web views.

So don’t animate it from the Open Home Foundation logo to the Home Assistant logo.

thick fjord
ancient oxide
#

Yeah, the dots anim is just a quick example

#

If there is an error, we can make the dots "fall off" to signify that something broke

thick fjord
#

I wouldn't use the brand logo for this. As you only want to brand load it positively.

ancient oxide
#

Ah c'mon lets make things more interesting 🙂

thick fjord
#

We can, only positive things

ancient oxide
#

You shown the Discord example. Reddit also have fun examples of their logo being used in different anims

thick fjord
#

It doesn't fall apart

ancient oxide
#

Yeah ok, maybe not fall apart, but change so that it shows an error status

thick fjord
#

Yeah we can do that

ancient oxide
#

Just like pulsing dots show loading status

#

I'll try to make a live instance with these ideas. But I still want to test with the OHF -> HA CasitaLoves

kindred sage
#

I like the dot because I most probably can make it natively without any custom library and it can be interupted in the middle if the load is fast

#

I think it's part of the guideline Google made for animated splashscreen

#

you don't want to add a fake delay so the animation should look good even if cut in the middle

ancient oxide
#

Temporary preview for 20min:
[Deleted]

kindred sage
#

Arf too late

ancient oxide
thick fjord
#

I think we should just animate the Home Assistant logo without any extras. As that is the recognizable graphic.

ancient oxide
#

I'd take it Guy and the marketing team to get their opinion, but they are busy with SOTOH this and next week, so I'd wait for that

thick fjord
#

Another reason why I think we should keep it simple: When you see the animation every time you open Home Assistant to do a quick action. You get extra unnecessary mental load.

thick fjord
#

To move this forward, I would suggest focusing on the overall loading animation and leaving the logo micro-animation for later. We’ve been discussing this for quite a while.

Some quick improvements we could make:

  • Use the updated Home Assistant and Open Home Foundation logos.
  • In both the native apps and on the web, keep the Home Assistant logo and the Open Home Foundation logo in the same position and at the same size.
  • Remove the fade animation in the native apps so the transition goes directly to web.
  • Remove the jump on the web loading page.
  • Add an extra loading state when loading takes more than 3 seconds, to indicate that it is taking a bit longer than expected.
  • On web, try to animate the transition from the loading screen to the content without showing a blank page in between.

We can always introduce a Home Assistant logo micro-animation afterward.

ancient oxide
#

Why do you think a micro-animation adds mental load? I’d argue that the true culprit is the current choppy, jumpy loading experience, which is less pleasant than anything else. You showed the Discord animation as a good example, and that one is far more animated than what I’m proposing here. 🤔

#

I do agree with most of your points, this is a pet project because we all have other priorities. Micro animation aside, my main goal with this is to show a stronger relationship of HA and the OHF and I believe this could do this. Should people be noticing this? I think they should, that's the goal of it, but like with anything it will become normal fade into the background

thick fjord
dense obsidian
#

We don’t alter our logo without approval of marketing ever

#

Logo are part of our IP. It’s what protect us.

#

I’m in favor of simplifying the loading animation as Matthias proposed but we keep it simple

kindred sage
dense obsidian
#

Sorry to be a pita but I’ll try one more time

We don’t alter our logo without approval of marketing

#

It does not have to be a “no”. But I want them in the loop

lime radish
#

Is this specifically as the OHF logo has been integrated into the animation or would even the animation of the logo class as needing marketing?

I want to include marketing anyway, the website might benefit from the logomark animating on hover etc

ancient oxide
#

I did talk with Clelia and she didn't have any objections on doing this. I want to propose this to Guy since it does the thing we want, which is make the connection of OHF and HA more clear, but with SOTOH I don't think it's the time.