Removing flicker

2 files changed, 25 insertions, 6 deletions

diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index e7300874..14c0a95f 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -27,6 +27,7 @@ class Client {
         this.enabled      = false;
         this.options      = {};
         this.definitions  = null;
+        this.sequence     = 0;
         this.fgRoot       = chrome.extension.getURL('fg');
 
         chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
@@ -105,16 +106,21 @@ class Client {
             if (length === 0) {
                 this.hidePopup();
             } else {
+                const sequence = this.sequence++;
                 range.setLength(length);
                 bgRenderText(
-                    {defs: definitions, root: this.fgRoot, options: this.options},
+                    {defs: definitions, root: this.fgRoot, options: this.options, sequence: sequence},
                     'term-list.html',
                     (content) => {
                         this.definitions = definitions;
                         this.showPopup(range, content);
+
                         bgCanAddNotes(definitions, (states) => {
                             if (states !== null) {
-                                states.forEach((state, index) => this.popup.sendMessage('setActionState', {index: index, state: state}));
+                                states.forEach((state, index) => this.popup.sendMessage(
+                                    'setActionState',
+                                    {index: index, state: state, sequence: sequence}
+                                ));
                             }
                         });
                     }
@@ -127,17 +133,30 @@ class Client {
         const state = {};
         state[mode] = false;
 
-        this.popup.sendMessage('setActionState', {index: index, state: state});
+        this.popup.sendMessage(
+            'setActionState',
+            {index: index, state: state, sequence: this.sequence}
+        );
     }
 
     actionDisplayKanji(kanji) {
         bgFindKanji(kanji, (definitions) => {
+            const sequence = this.sequence++;
             bgRenderText(
-                {defs: definitions, root: this.fgRoot, options: this.options},
+                {defs: definitions, root: this.fgRoot, options: this.options, sequence: sequence},
                 'kanji-list.html',
                 (content) => {
                     this.definitions = definitions;
                     this.popup.setContent(content, definitions);
+
+                    bgCanAddNotes(definitions, (states) => {
+                        if (states !== null) {
+                            states.forEach((state, index) => this.popup.sendMessage(
+                                'setActionState',
+                                {index: index, state: state, sequence: sequence}
+                            ));
+                        }
+                    });
                 }
             );
         });
diff --git a/ext/fg/js/frame.js b/ext/fg/js/frame.js
index 38848bfc..66d3a054 100644
--- a/ext/fg/js/frame.js
+++ b/ext/fg/js/frame.js
@@ -43,9 +43,9 @@ function onDomContentLoaded() {
 
 function onMessage(e) {
     const {action, params} = e.data, handlers = {
-        setActionState: ({index, state}) => {
+        setActionState: ({index, state, sequence}) => {
             for (const mode in state) {
-                const matches = document.querySelectorAll(`.action-link[data-index="${index}"][data-mode="${mode}"]`);
+                const matches = document.querySelectorAll(`.action-link[data-sequence="${sequence}"][data-index="${index}"][data-mode="${mode}"]`);
                 if (matches.length === 0) {
                     return;
                 }