Optimize initial load for timeline

lib/Controller/ApiController.php

@@ -77,6 +77,27 @@ class ApiController extends Controller {
         return $transforms;
     }
 
+    /** Preload a few "day" at the start of "days" response */
+    private function preloadDays(array &$days) {
+        $uid = $this->userSession->getUser()->getUID();
+        $transforms = $this->getTransformations();
+        $preloaded = 0;
+        foreach ($days as &$day) {
+            $day["detail"] = $this->timelineQuery->getDay(
+                $this->config,
+                $uid,
+                $day["dayid"],
+                $transforms,
+            );
+            $day["count"] = count($day["detail"]); // make sure count is accurate
+            $preloaded += $day["count"];
+
+            if ($preloaded >= 50) { // should be enough
+                break;
+            }
+        }
+    }
+
     /**
      * @NoAdminRequired
      *
@@ -93,6 +114,7 @@ class ApiController extends Controller {
             $user->getUID(),
             $this->getTransformations(),
         );
+        $this->preloadDays($list);
         return new JSONResponse($list, Http::STATUS_OK);
     }
 

src/components/Photo.vue

@@ -25,7 +25,7 @@
 
                 @click="click"
                 @error="error"
-                @load = "data.flag |= c.FLAG_LOADED"
+                @load="data.flag |= c.FLAG_LOADED"
 
                 @contextmenu="contextmenu"
                 @touchstart="touchstart"

src/components/Timeline.vue

@@ -415,10 +415,29 @@ export default class Timeline extends Mixins(GlobalMixin) {
         const list: IRow[] = [];
         const heads: {[dayId: number]: IRow} = {};
 
+        // Store the preloads in a separate map.
+        // This is required since otherwise the inner detail objects
+        // do not become reactive (which happens only after assignment).
+        const preloads: {
+            [dayId: number]: {
+                day: IDay,
+                detail: IPhoto[],
+            };
+        } = {};
+
         for (const day of data) {
-            day.count = Number(day.count);
+            // Initialization
             day.rows = new Set();
 
+            // Store the preloads
+            if (day.detail) {
+                preloads[day.dayid] = {
+                    day: day,
+                    detail: day.detail,
+                };
+                delete day.detail;
+            }
+
             // Nothing here
             if (day.count === 0) {
                 continue;
@@ -454,11 +473,12 @@ export default class Timeline extends Mixins(GlobalMixin) {
         this.list = list;
         this.heads = heads;
 
-        // Check preloads
-        for (const day of data) {
-            if (day.count && day.detail) {
-                this.processDay(day);
-            }
+        // Iterate the preload map
+        // Now the inner detail objects are reactive
+        for (const dayId in preloads) {
+            const preload = preloads[dayId];
+            preload.day.detail = preload.detail;
+            this.processDay(preload.day);
         }
 
         // Fix view height variable
@@ -608,7 +628,6 @@ export default class Timeline extends Mixins(GlobalMixin) {
 
     /**
      * Process items from day response.
-     * Do not auto reflow if you plan to cal the reflow function later.
      *
      * @param day Day object
      */
@@ -831,7 +850,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
      * @param {Set} delIds Set of file ids to delete
      * @param {Set} updatedDays of days that MAY be affected
      */
-    async deleteFromViewWithAnimation(delIds, updatedDays) {
+    async deleteFromViewWithAnimation(delIds: Set<number>, updatedDays: Set<IDay>) {
         if (delIds.size === 0 || updatedDays.size === 0) {
             return;
         }