refactor(popup): Avoid rendering "flash" when an entry is continued

The "New Entry" message path still caused a window reload. This also refactors the React components to do a nice update instead of deleting the entire DOM and re-mounting the components
toggl · Apr 8, 2019 · 026a8d6 · 026a8d6
1 parent d3977d4
commit 026a8d6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 11 deletions.
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -65,7 +65,9 @@
         </li>
         <div id="root-timer"></div>
         <div id="root-summary"></div>
-        <li class="entries-list"></li>
+        <li class="entries-list">
+          <div id="root-time-entries-list"></div>
+        </li>
       </ul>
 
 

diff --git a/src/scripts/popup.js b/src/scripts/popup.js
@@ -97,7 +97,6 @@ window.PopUp = {
 
   renderTimer: function () {
     const rootElement = document.getElementById('root-timer');
-    ReactDOM.unmountComponentAtNode(rootElement);
     const entry = TogglButton.$curEntry;
     ReactDOM.render(<Timer entry={entry} />, rootElement);
   },
@@ -140,7 +139,7 @@ window.PopUp = {
             PopUp.renderTimer();
             PopUp.renderEntriesList();
             PopUp.renderSummary();
-          } else if (response.type === 'list-continue') {
+          } else if (response.type === 'list-continue' || response.type === 'New Entry') {
             PopUp.renderTimer();
             PopUp.renderEntriesList();
           } else {
@@ -165,7 +164,6 @@ window.PopUp = {
   },
 
   renderEntriesList: function () {
-    const html = document.createElement('div');
     const entries = TogglButton.$user.time_entries;
     if (!entries || entries.length < 1) {
       return;
@@ -211,14 +209,7 @@ window.PopUp = {
       return;
     }
 
-    // Remove old html
-    while (PopUp.$entries.firstChild) {
-      PopUp.$entries.removeChild(PopUp.$entries.firstChild);
-    }
-
     // Render react tree
-    html.id = 'root-time-entries-list';
-    PopUp.$entries.appendChild(html);
     ReactDOM.render(<TimeEntriesList timeEntries={listEntries} projects={projects} />, document.getElementById('root-time-entries-list'));
   },