Show 'Loading…' as a placeholder before info is populated

atom · Nov 4, 2017 · 153de76 · 153de76
1 parent 35c825c
commit 153de76
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/lib/cache-panel-view.js b/lib/cache-panel-view.js
@@ -23,27 +23,27 @@ export default class CachePanelView {
           <div className='panel-body padded'>
             <div className='timing'>
               <span className='inline-block'>CoffeeScript files compiled</span>
-              <span className='inline-block highlight-info' ref='coffeeCompileCount'>0</span>
+              <span className='inline-block' ref='coffeeCompileCount'>Loading…</span>
             </div>
 
             <div className='timing'>
               <span className='inline-block'>Babel files compiled</span>
-              <span className='inline-block highlight-info' ref='babelCompileCount' />
+              <span className='inline-block' ref='babelCompileCount'>Loading…</span>
             </div>
 
             <div className='timing'>
               <span className='inline-block'>Typescript files compiled</span>
-              <span className='inline-block highlight-info' ref='typescriptCompileCount' />
+              <span className='inline-block' ref='typescriptCompileCount'>Loading…</span>
             </div>
 
             <div className='timing'>
               <span className='inline-block'>CSON files compiled</span>
-              <span className='inline-block highlight-info' ref='csonCompileCount' />
+              <span className='inline-block' ref='csonCompileCount'>Loading…</span>
             </div>
 
             <div className='timing'>
               <span className='inline-block'>Less files compiled</span>
-              <span className='inline-block highlight-info' ref='lessCompileCount' />
+              <span className='inline-block' ref='lessCompileCount'>Loading…</span>
             </div>
           </div>
         </div>
@@ -54,12 +54,17 @@ export default class CachePanelView {
   populate () {
     const compileCacheStats = this.getCompileCacheStats()
     if (compileCacheStats) {
+      this.refs.coffeeCompileCount.classList.add('highlight-info')
       this.refs.coffeeCompileCount.textContent = compileCacheStats['.coffee'].misses
+      this.refs.babelCompileCount.classList.add('highlight-info')
       this.refs.babelCompileCount.textContent = compileCacheStats['.js'].misses
+      this.refs.typescriptCompileCount.classList.add('highlight-info')
       this.refs.typescriptCompileCount.textContent = compileCacheStats['.ts'].misses
     }
 
+    this.refs.csonCompileCount.classList.add('highlight-info')
     this.refs.csonCompileCount.textContent = this.getCsonCompiles()
+    this.refs.lessCompileCount.classList.add('highlight-info')
     this.refs.lessCompileCount.textContent = this.getLessCompiles()
   }
 

diff --git a/lib/package-panel-view.js b/lib/package-panel-view.js
@@ -32,7 +32,7 @@ export default class PackagePanelView {
         <div className='inset-panel'>
           <div className='panel-heading'>{this.title}</div>
           <div className='panel-body padded'>
-            <div className='text-info' ref='summary' />
+            <div className='text-info' ref='summary'>Loading…</div>
             <ul className='list-group' ref='list' />
           </div>
         </div>

diff --git a/lib/window-panel-view.js b/lib/window-panel-view.js
@@ -31,28 +31,28 @@ export default class WindowPanelView {
           <div className='panel-body padded'>
             <div className='timing' ref='windowTiming'>
               <span className='inline-block'>Window load time</span>
-              <span className='inline-block' ref='windowLoadTime' />
+              <span className='inline-block' ref='windowLoadTime'>Loading…</span>
             </div>
 
             <div className='timing' ref='shellTiming'>
               <span className='inline-block'>Shell load time</span>
-              <span className='inline-block' ref='shellLoadTime' />
+              <span className='inline-block' ref='shellLoadTime'>Loading…</span>
             </div>
 
             <div ref='deserializeTimings'>
               <div className='timing' ref='workspaceTiming'>
                 <span className='inline-block'>Workspace load time</span>
-                <span className='inline-block' ref='workspaceLoadTime' />
+                <span className='inline-block' ref='workspaceLoadTime'>Loading…</span>
               </div>
 
               <div className='timing' ref='projectTiming'>
                 <span className='inline-block'>Project load time</span>
-                <span className='inline-block' ref='projectLoadTime' />
+                <span className='inline-block' ref='projectLoadTime'>Loading…</span>
               </div>
 
               <div className='timing' ref='atomTiming'>
                 <span className='inline-block'>Window state load time</span>
-                <span className='inline-block' ref='atomLoadTime' />
+                <span className='inline-block' ref='atomLoadTime'>Loading…</span>
               </div>
             </div>
           </div>