[perf] Fix CSS animation for ellipses in "Syncing your mailbox"

Summary:
This animation was changing the width of the after pseudoelement, which was
causing a lot of repainting and layout to occur in the very bottom corner of
the screen. This in turn caused an idle window to use 50-70% CPU all the
time during initial sync. The fix is to change the after element to three
spans and modify the animation to alter their opacity which avoids having to
do style and layout reflows due to width changes. It also looks slightly cooler
IMHO :-) An idle main window now sits around 8% CPU on my laptop.

Test Plan: Run locally, verify that CPU is lower.

Reviewers: evan, juan

Reviewed By: juan

Subscribers: halla

Differential Revision: https://phab.nylas.com/D3810

internal_packages/notifications/lib/sidebar/sync-activity.jsx

@@ -83,13 +83,15 @@ export default class SyncActivity extends React.Component {
       'blink': this.state.blink,
     });
 
+    const ellipses = [1, 2, 3].map((i) => <span className={`ellipsis${i}`}>.</span>);
+
     return (
       <div
         className={classSet}
         key="sync-activity"
         onClick={() => (this.setState({expanded: !this.state.expanded}))}
       >
-        <div className="inner clickable">Syncing your mailbox</div>
+        <div className="inner clickable">Syncing your mailbox{ellipses}</div>
         {this.state.expanded ? this._renderExpandedDetails() : false}
       </div>
     )

internal_packages/notifications/lib/sidebar/syncback-activity.jsx

@@ -25,12 +25,14 @@ export default class SyncbackActivity extends React.Component {
       counts[label] += +task.numberOfImpactedItems()
     });
 
+    const ellipses = [1, 2, 3].map((i) => <span className={`ellipsis${i}`}>.</span>);
+
     const items = _.pairs(counts).map(([label, count]) => {
       return (
         <div className="item" key={label}>
           <div className="inner">
             <span className="count">({count.toLocaleString()})</span>
-            {label}
+            {label}{ellipses}
           </div>
         </div>
       )

internal_packages/notifications/stylesheets/notifications.less

@@ -26,13 +26,16 @@
     .inner {
       padding: @padding-large-vertical @padding-base-horizontal @padding-large-vertical @padding-base-horizontal;
       border-bottom: 1px solid rgba(0,0,0,0.1);
-    }
-    .inner::after {
-      content: '...';
-      display: inline-block;
-      vertical-align: bottom;
-      overflow: hidden;
-      animation: expand-ellipsis 3s infinite;
+
+      .ellipsis1 {
+        animation: show-ellipsis 3s 0s infinite;
+      }
+      .ellipsis2 {
+        animation: show-ellipsis 3s 250ms infinite;
+      }
+      .ellipsis3 {
+        animation: show-ellipsis 3s 500ms infinite;
+      }
     }
     .count {
       color: @text-color-very-subtle;
@@ -247,9 +250,9 @@
   }
 }
 
-@-webkit-keyframes expand-ellipsis {
-  from {width: 0;}
-  to {width: 10px;}
+@-webkit-keyframes show-ellipsis {
+  0%, 100% {opacity: 0;}
+  50%, {opacity: 1.0;}
 }
 
 // Windows Changes