Reduce UI flicker

typicode · typicode · commit 1717cb6a3f88 · 2018-01-21T18:05:40.000+01:00
diff --git a/src/app/Store.ts b/src/app/Store.ts
@@ -34,10 +34,10 @@ function clear(servers: Map<string, IMonitor | IProxy>, data: any) {
 }
 
 export default class Store {
+  @observable public isLoading: boolean = true
   @observable public selectedMonitorId: string = ''
   @observable public monitors: Map<string, IMonitor> = new Map()
   @observable public proxies: Map<string, IProxy> = new Map()
-  @observable public servers: Map<string, IMonitor | IProxy> = new Map()
 
   constructor() {
     this.watchServers()
@@ -71,6 +71,9 @@ export default class Store {
           }
         }
       })
+
+      // Initial data has been loaded
+      this.isLoading = false
     })
   }
 
diff --git a/src/app/components/Nav/index.css b/src/app/components/Nav/index.css
@@ -17,6 +17,10 @@ header {
   flex: 1;
 }
 
+.menu.hidden {
+  visibility: hidden;
+}
+
 footer {
   padding: 1rem;
 }
diff --git a/src/app/components/Nav/index.tsx b/src/app/components/Nav/index.tsx
@@ -15,11 +15,11 @@ export interface IProps {
 }
 
 function Nav({ store }: IProps) {
-  const { selectedMonitorId, monitors, proxies } = store
+  const { isLoading, selectedMonitorId, monitors, proxies } = store
   return (
     <div className="nav">
       <header>hotel</header>
-      <div className="menu">
+      <div className={classNames('menu', { hidden: isLoading })}>
         {monitors.size === 0 &&
           proxies.size === 0 && (
             <div>

Original file line number	Diff line number	Diff line change
`@@ -34,10 +34,10 @@ function clear(servers: Map<string, IMonitor \| IProxy>, data: any) {`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`export default class Store {`
	`37`	`+ @observable public isLoading: boolean = true`
`37`	`38`	`@observable public selectedMonitorId: string = ''`
`38`	`39`	`@observable public monitors: Map<string, IMonitor> = new Map()`
`39`	`40`	`@observable public proxies: Map<string, IProxy> = new Map()`
`40`		`- @observable public servers: Map<string, IMonitor \| IProxy> = new Map()`
`41`	`41`
`42`	`42`	`constructor() {`
`43`	`43`	`this.watchServers()`
`@@ -71,6 +71,9 @@ export default class Store {`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`	`})`
	`74`	`+`
	`75`	`+ // Initial data has been loaded`
	`76`	`+ this.isLoading = false`
`74`	`77`	`})`
`75`	`78`	`}`
`76`	`79`