loader and object data

src/components/App.js

@@ -5,6 +5,7 @@ import Lowerbar from "./Lowerbar";
 import SegmentOne from "./SegmentOne";
 import SegmentFour from "./SegmentFour";
 import SegmentFive from "./SegmentFive";
+import Loader from "./Loader";
 
 $.fn.getDOMPath = function () {
   let path = this.parents().addBack();
@@ -129,6 +130,7 @@ class App extends Component {
   constructor() {
     super();
     this.state = {
+      loading: true,
       serverUrl: '',
       crawlUrl: '',
       activeStep: 1,
@@ -341,6 +343,7 @@ class App extends Component {
   }
 
   componentDidMount() {
+
     const App = this;
 
     // Prevents default click event
@@ -388,13 +391,18 @@ class App extends Component {
       highlightElement(App, position, DOMPath, styles, text);
       selectElement(App, siblingSelector, DOMPath, styles, text, position);
     });
+
+     setTimeout(() => this.setState({ loading: false }), 2000); 
+
   }
 
   render() {
     return (
       <div className="App">
         <div className="App-header">
 
+          {this.state.loading ?<Loader/>:null}
+
           {/* <AuthModal trigger={<button>Authenticate</button>}/>
           <SendDefinitionModal trigger={<button>Create API Endpoint</button>} address='localhost:4000'/> */}
           <Toolbar closeFunc={this.closeEx} toggleLower={this.toggleLower} arrowDown={this.state.lowerBar} />

src/components/Loader.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
+
+const LoaderExampleLoader = () => (
+    <Dimmer page active inverted>
+        <Loader inverted size='large'>
+            Loading
+        </Loader>
+    </Dimmer>
+
+)
+
+export default LoaderExampleLoader