[Loading Animation] New app

[RKBoss6]

This is a test app from this discussion

This app adds an animation when Bangle.load is called, for more fluidity in the UI, making it feel more lively and responsive
The app is in beta, meaning some bugs will be present, but nothing that breaks a device, and has been extensively tested by me for almost a month now.

[Copilot]

Pull request overview

This PR adds a new bootloader app called "Loading Animation" that displays an expanding circle animation when Bangle.load() is called, providing visual feedback during app transitions on Bangle.js 2 devices.

Key changes:

• Introduces a visual loading animation using an expanding circle effect
• Modifies the Bangle.load() function to show animation before loading apps
• Implements a 0.3-second animation delay before app transitions

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/loadanim/metadata.json	App metadata defining the bootloader configuration
apps/loadanim/icon.png	App icon in PNG format
apps/loadanim/boot.js	Core logic implementing the animation and Bangle.load override
apps/loadanim/README.md	Documentation explaining the app's purpose and known bugs
apps/loadanim/ChangeLog	Version history tracking

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[bobrippling]

Very cool!

[thyttan]

Thanks 🙏 The effect is cool but the loading times are increased fairly much on my watch 🫤

[RKBoss6]

I suppose it's just a matter of personal preference - I like having the watch animate when loading, even if it costs me a 1-2 seconds of loading time. Hopefully everyone can at least try it out to see what they think...

[gfwilliams]

On the latest cutting edge firmwares I actually implemented something that could really help here. It's a timer that allows you to execute JS while the app is executing other JS.

So if you add some code like this into loadscr.0.boot.js:

{
  let timer;
  try { timer = require("timer"); } catch { print("loadscr: need FW 2v29+"); }
  if (timer) {
    let o = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),1);
    let n = 10, gl = g;
    o.transparent = 1;
    o.palette = new Uint16Array(2);//all black
    o.fillCircle(88,88,n);
    Bangle.setLCDOverlay(o,0,0,{id:"loadscr"});
    gl.clear(1).flip(1);
    let id = timer.add({
      type:"EXEC", fn: () => { "ram";
        n+=10;
        if (n>170) done();
        else {
          o.fillCircle(88,88,n);
          gl.flip(1);
        }
      },
      time:100,
      interval:100,
    });
    let done = function() {
      console.log("Done");
      if (id===undefined) return;
      require("timer").remove(id);
      id = undefined;
      Bangle.setLCDOverlay(undefined, {id: "loadscr"});
    };
    setTimeout(done, 0);
  }
}

You'll actually end up with an animation of a circle that increases and shows the app while it is loading - it won't slow the loading of the new app down anywhere near as much (basically only what's required to update the screen).

Similarly this one takes a screenshot of the screen and scrolls it off:

{
  let timer;
  try { timer = require("timer"); } catch { print("loadscr: need FW 2v29+"); }
  if (timer) {
    let o = g.asImage();
    g.clear();
    let n = 10, gl = g;
    Bangle.setLCDOverlay(o,n,0,{id:"loadscr"});
    gl.flip(1);
    let id = timer.add({
      type:"EXEC", fn: () => {"ram"
        n+=10;
        if (n>170) done();
        else {
          Bangle.setLCDOverlay(o,n,0,{id:"loadscr"});
          gl.flip(1);
        }
      },
      time:100,
      interval:100,
    });
    let done = function() {
      console.log("Done");
      if (id===undefined) return;
      require("timer").remove(id);
      id = undefined;
      Bangle.setLCDOverlay(undefined, {id: "loadscr"});
    };
    setTimeout(done, 0);
  }
}

So I'd rather not put your code in, but instead do something using this new feature.

I'll commit a new app in a few minutes

[RKBoss6]

Oh wow, that looks really good! I'll play around with this and see what I can do! Thanks!

[gfwilliams]

I've just pushed an app (sorry, I stole your loadanim name) that contains 3 different animations.

It should be pretty easy to add your own animations into that. My favourite is the 'progress' one.

It's worth noting:

• fullscreen overlays are pretty slow (it's the height that matters, not the width) so actually if you can animate something like a progress bar that'll be much faster
• Bangle.js looks for a file called .loading when loading an app and if it finds it it'll display that before doing anything else. The Progress animation uses that to display the Loading... text right at the start - and I think you could do some neat things using that.

[thyttan]

• so actually if you can animate something like a progress bar that'll be much faster

Makes me think of a progress bar-like animation I want to try (if no one else is quicker to it): A thin line that zips across right to left from the HW button at the middle of the screen. Then maybe it bounces back like a yo-yo (maybe it even has a circle at the end for the yo-yo style to be complete!) I imagine that way it connects very much with the action of pressing the button.

[gfwilliams]

If you update to a cutting edge build now then I've managed to really speed up the overlay rendering, so while it's not as fast as without overlays (since without we can send data over in the background), it's now 70ms to render a fullscreen overlay rather than 140ms.

... but that's still going to really hurt load times if you're updating the whole screen every 100ms!

[thyttan]

it's now 70ms to render a fullscreen overlay rather than 140ms.

Impressive improvement!

[RKBoss6]

Wow, I haven't yet been able to try the animations, but the cutting edge fw build seems to have not only improved overlays, but also general loading times are much more responsive and quick for me! It used to take 2-3 seconds to load an app, and now it takes <1! Looking really good!

[RKBoss6]

I tried it out, and it has a lot of potential! On my end however, I've found it to be quite unreliable, with the circle animation not being seen most of the time, instead popping into place. The sliding animation also slows down actual loading quite a bit. The progress bar seems solid though, and it's a perfect example of what could be... I'll try to do some tinkering with the animations on my end.

[gfwilliams]

Is it possible you still have the code I pasted in here earlier installed in a file? When it was unreliable for me, that was the reason

[RKBoss6]

No, I have the app installed, I can try to reinstall it and see if it mates a difference...

[RKBoss6]

I reinstalled it, and it's much of the same. It seems to only be the circle animation that's unreliable - everything else seems to work well. What animation are you using currently? We can see if it's the same experience for all of us...

[gfwilliams]

If you have the app installed, you can still have the loadscr.0.boot.js file left on your watch as well. Can you confirm it's not there?

The loading screen's been working great for me on mine over the weekend - I'm using Spinner at the moment.

[RKBoss6]

No, I don't have the loadscr file, all other animations work great for me except circle. Is that the case for you as well? For me, it just shows a black screen, and never animates the circle expanding.

[gfwilliams]

Just tried, and I do see it working fine, although it is a bit slow. What happens in the settings page - do you see it animate there?

[RKBoss6]

Yes, but when I head back to the clock out load anything else, it doesn't work, and on the rare occasions it does, it's extraordinarily slow on my watch

[gfwilliams]

What firmware version are you on? As I mentioned to @thyttan I made some changes to really improve overlay speed at the end of last week - so you could have been on a firmware that worked, but was slow.

... you're not running it in left-handed mode or something?

[RKBoss6]

No, I'm on 2v28.33, updated last friday... I can try updating again just in case.

[RKBoss6]

Can you share a video of what your circle animation looks like? I'll try to get one of mine in soon

[gfwilliams]

.33 should be fine - that's basically the latest. Video is at https://photos.app.goo.gl/EqsVXw1s5wGhK3FB6

I've moved the circles/slide load animations to the bottom of the options list as IMO they're not as nice as progress/spinner

[RKBoss6]

Hmm, mine is about the same, except it sometimes won't show the circle at all - I'm wondering if it's due to this being the only animation that's triggered at the end, rather than when it's starting to load?

[gfwilliams]

When fast loading the circle won't show at all (eg launcher->clock and back for most clocks). Could that be it?

It triggers at the beginning of the boot code, so it's actually done before the app file has even started to be read from flash. The things that slow it down could actually be functions in the Espruino firmware that take a long time to execute - but I'm not entirely sure what those might be.

For now I've just put the circles animation at the end of the list. IMO it's not the greatest anyway - the other ones tend to look a lot better.

[RKBoss6]

Tried my hand at making an animation: #4093, wdyt?

[RKBoss6]

Also, for animations that don't have a .loading image, currently they display the default Loading... text. I changed it to not display anything so the animation is the highlight...

[gfwilliams]

I'll reply on #4093