iconlaunch 0.21: Display placeholder icons at start and render line by line to the screen to make loading seem faster

Author: gfwilliams

apps/iconlaunch/ChangeLog

@@ -25,4 +25,5 @@
 0.18: Better performance
 0.19: Remove 'jit' keyword as 'for(..of..)' is not supported (fix #2937)
 0.20: Use '28' font if installed (2v26+) and put it inside a rounded rect in the current theme
-      Ensure 'oneClickExit' is the default
+      Ensure 'oneClickExit' is the default
+0.21: Display placeholder icons at start and render line by line to the screen to make loading seem faster

apps/iconlaunch/app.js

@@ -16,6 +16,22 @@
   } else { // for fast-load, if we had widgets then we should hide them
     require("widget_utils").hide();
   }
+
+  let selectedItem = -1;
+  const R = Bangle.appRect;
+  const iconSize = 48;
+  const appsN = Math.floor(R.w / iconSize);
+  const whitespace = Math.floor((R.w - appsN * iconSize) / (appsN + 1));
+  const iconYoffset = Math.floor(whitespace/4)-1;
+  const itemSize = iconSize + whitespace;
+
+  // show some grey blocks as a loading screen
+  g.clearRect(Bangle.appRect).setColor("#888");
+  for (var y=R.y+whitespace/2;y<R.h;y+=itemSize)
+    for (var x=R.x+whitespace/2;x<R.w;x+=itemSize)
+      g.drawRect(x+16,y+16,x+32,y+32);
+  g.flip();
+
   let launchCache = s.readJSON("iconlaunch.cache.json", true)||{};
   let launchHash = s.hash(/\.info/);
   if (launchCache.hash!=launchHash) {
@@ -38,13 +54,7 @@
   const ICON_MISSING = s.read("iconlaunch.na.img");
   let count = 0;
 
-  let selectedItem = -1;
-  const R = Bangle.appRect;
-  const iconSize = 48;
-  const appsN = Math.floor(R.w / iconSize);
-  const whitespace = Math.floor((R.w - appsN * iconSize) / (appsN + 1));
-  const iconYoffset = Math.floor(whitespace/4)-1;
-  const itemSize = iconSize + whitespace;
+
 
   launchCache.items = {};
   for (let c of launchCache.apps){
@@ -82,8 +92,9 @@
       drawText(itemI, r.y, selectedApp);
       texted=itemI;
     }
+    if (firstRun) g.flip(); // at startup
   };
-
+  let firstRun = true;
   let drawText = function(i, appY, selectedApp) {
     const idy = (selectedItem - (selectedItem % 3)) / 3;
     if (i != idy) return;
@@ -150,10 +161,11 @@
   }
 
   let scroller = E.showScroller(options);
+  firstRun = false; // this stops us flipping the screen after each line we draw
 
   let timeout;
   const updateTimeout = function(){
-  if (settings.timeOut!="Off"){
+    if (settings.timeOut!="Off"){
       let time=parseInt(settings.timeOut);  //the "s" will be trimmed by the parseInt
       if (timeout) clearTimeout(timeout);
       timeout = setTimeout(Bangle.showClock,time*1000);

apps/iconlaunch/metadata.json

@@ -2,7 +2,7 @@
 	"id": "iconlaunch",
 	"name": "Icon Launcher",
 	"shortName" : "Icon launcher",
-	"version": "0.20",
+	"version": "0.21",
 	"icon": "app.png",
 	"description": "A launcher inspired by smartphones, with an icon-only scrollable menu.",
 	"tags": "tool,system,launcher",