Add Loading Text

Author: thenamankumar

:q

@@ -0,0 +1 @@
+src/App.js|15 col 25| Unexpected token, expected ";"

:w

@@ -0,0 +1,46 @@
+import React from 'react';
+import Search from './components/Search';
+
+class App extends React.Component {
+  state = {
+    user: null,
+    error: null,
+  };
+
+  fetchUserData = async username => {
+    try {
+      this.setState({ loading: true });
+      const res = await fetch(`https://api.github.com/users/${username}`);
+      if (res.ok) {
+        const data = await res.json();
+
+        return this.setState({
+          user: data,
+        });
+      }
+
+      const error = (await res.json()).message;
+
+      this.setState({
+        error,
+      });
+    } catch (err) {
+      this.setState({
+        error: 'There was some error',
+      });
+    }
+  };
+
+  render() {
+    const { error } = this.state;
+
+    return (
+      <div>
+        <Search fetchData={this.fetchUserData} />
+        {error && <p className="text-danger">{error}</p>}
+      </div>
+    );
+  }
+}
+
+export default App;

src/App.js

@@ -5,37 +5,47 @@ class App extends React.Component {
   state = {
     user: null,
     error: null,
+    loading: false,
   };
 
   fetchUserData = async username => {
-    try {
-      const res = await fetch(`https://api.github.com/users/${username}`);
-      if (res.ok) {
-        const data = await res.json();
+    this.setState({ loading: true }, async () => {
+      try {
+        const res = await fetch(`https://api.github.com/users/${username}`);
+        if (res.ok) {
+          const data = await res.json();
 
-        return this.setState({
-          user: data,
-        });
-      }
+          return this.setState({
+            user: data,
+            loading: false,
+          });
+        }
 
-      const error = (await res.json()).message;
+        const error = (await res.json()).message;
 
-      this.setState({
-        error,
-      });
-    } catch (err) {
-      this.setState({
-        error: 'There was some error',
-      });
-    }
+        this.setState({
+          error,
+          loading: false,
+        });
+      } catch (err) {
+        this.setState({
+          error: 'There was some error',
+          loading: false,
+        });
+      }
+    });
   };
 
   render() {
-    const { error } = this.state;
+    const { error, loading } = this.state;
+
     return (
       <div>
         <Search fetchData={this.fetchUserData} />
-        {error && <p className="text-danger">{error}</p>}
+        <div className="text-center pt-5">
+          {loading && <p>Loading...</p>}
+          {error && <p className="text-danger">{error}</p>}
+        </div>
       </div>
     );
   }