Update App.tsx

src/App.tsx

@@ -8,6 +8,7 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  showGraph: boolean,
 }
 
 /**
@@ -22,25 +23,35 @@ class App extends Component<{}, IState> {
       // data saves the server responds.
       // We use this state to parse data down to the child element (Graph) as element property
       data: [],
+      showGraph: false,
     };
   }
 
   /**
    * Render Graph react component with state.data parse as property data
    */
   renderGraph() {
-    return (<Graph data={this.state.data}/>)
+    if(This.state.showGraph){
+      return (<Graph data={this.state.data}/>)
+  }
   }
-
   /**
    * Get new data from server and update the state with the new data
    */
   getDataFromServer() {
-    DataStreamer.getData((serverResponds: ServerRespond[]) => {
-      // Update the state by creating a new array of data that consists of
-      // Previous data in the state and the new data from server
-      this.setState({ data: [...this.state.data, ...serverResponds] });
-    });
+      let x = 0;
+      const interval = setInterval (() => {
+        DataStreamer.getData((serverResponds: ServerRespond []) => {
+          this.setState({
+            data: serverResponds,
+            showGraph: true,
+          });
+        });
+        X++;
+        if (x > 1000) {
+          clearInterval (interval);
+        }
+      }, 100);
   }
 
   /**