From 8ce454c1e719366d5c27cb2e3b565d65216a6c44 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 15 Dec 2018 11:25:11 +0000
Subject: [PATCH] Use Array.fill instead to allocate on start, also updated
 README

---
 README.md    | 27 +++++++++++++++++++++++----
 index.js     | 26 ++++++++++----------------
 package.json |  2 +-
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index fce7e76..834564e 100644
--- a/README.md
+++ b/README.md
@@ -4,13 +4,18 @@
 
 This library allows you to create Google Contacts style dynamic lists, it is built upon Vue.js hence is easy to integrate into existing websites with or without Vue.
 
-### Demo
----
-![demo](https://owo.insrt.uk/b9d1435e.mp4)
+- [GitLab repository](https://gitlab.insrt.uk/insert/vue-dynamic-list)
+- [NPM package](https://www.npmjs.com/package/vue-dynamic-list)
+- [unpkg CDN link](https://unpkg.com/vue-dynamic-list@1.0.1/index.js)
 
 ### Usage
 ---
 
+Include the library:
+```html
+<script src="https://unpkg.com/vue-dynamic-list@1.0.1/index.js"></script>
+```
+
 In your Vue.js application:
 ```html
 <dynamic-list ref="myList">
@@ -25,6 +30,7 @@ In your Vue.js application:
 
 Using the library:
 ```js
+// create your Vue app, with dynamic-list nested in it
 const app = new Vue({
 	el: '#app'
 });
@@ -45,4 +51,17 @@ new vDynamicList(app, {
 	// choose a suitable limit for each section
 	limit: 100
 });
-```
\ No newline at end of file
+```
+
+### Comparison
+---
+
+> Vue Dynamic List on the left alongside Google Contacts
+
+![Comparison between Google Contacts and Vue Dynamic List](https://owo.insrt.uk/500a5b64.png)
+
+### Demo
+---
+![Demo Video](https://owo.insrt.uk/b9d1435e.mp4)
+
+> Not embedding? [(Direct Link)](https://owo.insrt.uk/b9d1435e.mp4)
\ No newline at end of file
diff --git a/index.js b/index.js
index 333be7b..834ea6e 100644
--- a/index.js
+++ b/index.js
@@ -6,12 +6,11 @@ class _vDynamicUpdateCycle {
 		this.total = Math.ceil(total / limit);
 		this.limit = limit;
 
-		this.states = [];
+		this.states = Array(this.total).fill(0);
 		this.loadQueue = [];
 		this.canUpdate = true;
 
 		for (let i=0;i<this.total;i++) {
-			this.states.push({loaded: false, loading: false});
 			this.component.sections.push(false);
 		}
 
@@ -25,15 +24,13 @@ class _vDynamicUpdateCycle {
 		});
 	}
 	populate(x, e = false) {
-		let y = [];
-		for (let i=0;i<x;i++) y.push(e);
-		return y;
+		return Array(x).fill(e);
 	}
 	updateElm(i, v) {
 		return new Promise(resolve => {
 			this.load(i, this.limit).then(data => {
 				this.component.sections.splice(i, 1, data);
-				this.states[i].loaded = true;
+				this.states[i] = 2;
 				resolve();
 			});
 		});
@@ -49,16 +46,13 @@ class _vDynamicUpdateCycle {
 		let entries = $('.section');
 		for (let i=0;i<entries.length;i++) {
 			let v = entries[i];
-			if (!this.states[i].loading) {
-				if (this.visible(entries[i])) {
-					this.component.sections.splice(i, 1, this.populate(this.limit));
-					this.states[i].loading = true;
-				}
-			}
-			if (!this.states[i].loaded) {
-				if (this.visible(entries[i])) {
-					this.component.sections.splice(i, 1, this.populate(this.limit));
-					if (this.loadQueue.indexOf([i, v] == -1)) this.loadQueue.push([i, v]);
+			if (this.visible(entries[i])) {
+				switch (this.states[i]) {
+					case 0:
+						this.component.sections.splice(i, 1, this.populate(this.limit));
+						this.states[i]++;
+					case 1:
+						if (this.loadQueue.indexOf([i, v] == -1)) this.loadQueue.push([i, v]);
 				}
 			}
 		};
diff --git a/package.json b/package.json
index 14a46cd..3f16ed0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-dynamic-list",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Simple fixed size dynamically loading lists in Vue.js",
   "main": "index.js",
   "scripts": {
-- 
GitLab