Pixi tile layer: attempt repeated redraws after 3sec wait

The tile layer gives allows the image loading to take three seconds max.
So far it just stopped updating afterwards, even though images are still
loaded. A manual update like with the help of panning the view would
usually show additionally loaded data. With this commit, image data is
attempted to render every 500ms for five seconds after this three second
period has ended. If a new redraw happens in-between, the old interval
is canceled.

django/applications/catmaid/static/js/layers/pixi-tile-layer.js

@@ -263,11 +263,32 @@
       // not it has loaded. Do this before loading tiles in case they load
       // immediately, so that the buffer will be cleared.
       window.clearTimeout(this._swapBuffersTimeout);
-      this._swapBuffersTimeout = window.setTimeout(this._swapBuffers.bind(this, true), 3000);
+      const swapBufferTimeoutHandler = () => {
+        const nToLoad = this._swapBuffers(true);
+        if (nToLoad > 0) {
+          // Unless canceled, try to redrawing every 0.5 sec for five seconds.
+          window.clearInterval(this._renderInterval);
+          this._renderIntervalRunningTime = 0;
+          this._renderInterval = window.setInterval(() => {
+            this._renderIntervalRunningTime += 500;
+            this._renderIfReady();
+            if (this._renderIntervalRunningTime > 5000) {
+              window.clearInterval(this._renderInterval);
+              this._renderIntervalRunningTime = 0;
+            }
+          }, 500);
+        }
+      };
+      this._swapBuffersTimeout = window.setTimeout(swapBufferTimeoutHandler, 3000);
+      this._renderInterval = null;
+      this._renderIntervalRunningTime = 0;
       var newRequest = CATMAID.PixiContext.GlobalTextureManager.load(
           toLoad,
           this.tileSource.getRequestHeaders(),
-          this._swapBuffers.bind(this, false, this._swapBuffersTimeout));
+          () => {
+            this._swapBuffers(false, this._swapBuffersTimeout);
+            window.clearInterval(this._renderInterval);
+          });
       CATMAID.PixiContext.GlobalTextureManager.cancel(this._tileRequest);
       this._tileRequest = newRequest;
       loading = true;
@@ -299,6 +320,7 @@
     window.clearTimeout(this._swapBuffersTimeout);
     this._swapBuffersTimeout = null;
 
+    let nInvalid = 0;
     for (var i = 0; i < this._tiles.length; ++i) {
       for (var j = 0; j < this._tiles[0].length; ++j) {
         var source = this._tilesBuffer[i][j];
@@ -315,6 +337,9 @@
               this._setTextureInterpolationMode(tile.texture, this._pixiInterpolationMode);
             }
             tile.visible = true;
+            if (!texture || !texture.valid) {
+              ++nInvalid;
+            }
           }
         }
       }
@@ -331,6 +356,8 @@
       this._completionCallback = null;
       completionCallback();
     }
+
+    return nInvalid;
   };
 
   /** @inheritdoc */