From f3b728ee6fa343d602041ad444cbc15b86ce3d5f Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <miblodelcarpio@gmail.com>
Date: Sun, 15 Jul 2018 23:52:52 +0100
Subject: [PATCH] cinera_search.js: Mitigate flickering

---
 cinera/cinera.c         |  6 +++---
 cinera/cinera_search.js | 10 ++++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/cinera/cinera.c b/cinera/cinera.c
index 0a62e1e..65ff893 100644
--- a/cinera/cinera.c
+++ b/cinera/cinera.c
@@ -16,7 +16,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 5,
-    .Patch = 65
+    .Patch = 66
 };
 
 // TODO(matt): Copy in the DB 3 stuff from cinera_working.c
@@ -5510,12 +5510,12 @@ IndexToBuffer(index *Index, buffers *CollationBuffers) // NOTE(matt): This guy m
 
         char *Theme = StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID;
         int Allowance = StringLength(Theme) * 2 + StringLength(Config.ProjectID) + StringLength(Config.BaseURL) + StringLength(Config.PlayerLocation);
-        char queryContainer[659 + Allowance]; // NOTE(matt): Update the size if changing the string
+        char queryContainer[678 + Allowance]; // NOTE(matt): Update the size if changing the string
         CopyString(queryContainer, sizeof(queryContainer),
                 "<div class=\"cineraQueryContainer %s\">\n"
                 "            <label for=\"query\">Query:</label>\n"
                 "            <div class=\"inputContainer\">\n"
-                "                <input type=\"text\" id=\"query\">\n"
+                "                <input type=\"text\" autocomplete=\"off\" id=\"query\">\n"
                 "                <div class=\"spinner\">\n"
                 "                    Downloading data...\n"
                 "                </div>\n"
diff --git a/cinera/cinera_search.js b/cinera/cinera_search.js
index 03bf2ff..33d6d32 100644
--- a/cinera/cinera_search.js
+++ b/cinera/cinera_search.js
@@ -88,6 +88,7 @@ function padTimeComponent(component) {
     return (component < 10 ? "0" + component : component);
 }
 
+var renderHandle;
 function runSearch() {
     var queryStr = document.getElementById("query").value;
     if (lastQuery != queryStr) {
@@ -131,9 +132,10 @@ function runSearch() {
                 }
             }
 
-            if (!rendering) {
-                renderResults();
+            if (rendering) {
+                clearTimeout(renderHandle);
             }
+            renderResults();
         } else {
             document.querySelector(".spinner").classList.add("show");
         }
@@ -151,7 +153,7 @@ function runSearch() {
 function renderResults() {
     if (resultsIndex < resultsToRender.length) {
         rendering = true;
-        var maxItems = 10;
+        var maxItems = 42;
         var numItems = 0;
         while (numItems < maxItems && resultsIndex < resultsToRender.length) {
             var query = resultsToRender[resultsIndex].query;
@@ -203,7 +205,7 @@ function renderResults() {
                 resultsIndex++;
             }
         }
-        setTimeout(renderResults, 0);
+        renderHandle = setTimeout(renderResults, 0);
     } else {
         rendering = false;
     }