cinera_search.js: Mitigate flickering

This commit is contained in:
Matt Mascarenhas 2018-07-15 23:52:52 +01:00
parent 8607ca87ea
commit f3b728ee6f
2 changed files with 9 additions and 7 deletions

View File

@ -16,7 +16,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 5, .Minor = 5,
.Patch = 65 .Patch = 66
}; };
// TODO(matt): Copy in the DB 3 stuff from cinera_working.c // 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; char *Theme = StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID;
int Allowance = StringLength(Theme) * 2 + StringLength(Config.ProjectID) + StringLength(Config.BaseURL) + StringLength(Config.PlayerLocation); 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), CopyString(queryContainer, sizeof(queryContainer),
"<div class=\"cineraQueryContainer %s\">\n" "<div class=\"cineraQueryContainer %s\">\n"
" <label for=\"query\">Query:</label>\n" " <label for=\"query\">Query:</label>\n"
" <div class=\"inputContainer\">\n" " <div class=\"inputContainer\">\n"
" <input type=\"text\" id=\"query\">\n" " <input type=\"text\" autocomplete=\"off\" id=\"query\">\n"
" <div class=\"spinner\">\n" " <div class=\"spinner\">\n"
" Downloading data...\n" " Downloading data...\n"
" </div>\n" " </div>\n"

View File

@ -88,6 +88,7 @@ function padTimeComponent(component) {
return (component < 10 ? "0" + component : component); return (component < 10 ? "0" + component : component);
} }
var renderHandle;
function runSearch() { function runSearch() {
var queryStr = document.getElementById("query").value; var queryStr = document.getElementById("query").value;
if (lastQuery != queryStr) { if (lastQuery != queryStr) {
@ -131,9 +132,10 @@ function runSearch() {
} }
} }
if (!rendering) { if (rendering) {
renderResults(); clearTimeout(renderHandle);
} }
renderResults();
} else { } else {
document.querySelector(".spinner").classList.add("show"); document.querySelector(".spinner").classList.add("show");
} }
@ -151,7 +153,7 @@ function runSearch() {
function renderResults() { function renderResults() {
if (resultsIndex < resultsToRender.length) { if (resultsIndex < resultsToRender.length) {
rendering = true; rendering = true;
var maxItems = 10; var maxItems = 42;
var numItems = 0; var numItems = 0;
while (numItems < maxItems && resultsIndex < resultsToRender.length) { while (numItems < maxItems && resultsIndex < resultsToRender.length) {
var query = resultsToRender[resultsIndex].query; var query = resultsToRender[resultsIndex].query;
@ -203,7 +205,7 @@ function renderResults() {
resultsIndex++; resultsIndex++;
} }
} }
setTimeout(renderResults, 0); renderHandle = setTimeout(renderResults, 0);
} else { } else {
rendering = false; rendering = false;
} }