Show separate loading indicator for package list

src/App.js

@@ -57,9 +57,7 @@ class App extends React.Component {
     });
   }
 
-  componentDidMount() {
-    this.loadDashboard()
-
+  loadPkgs() {
     const url = '/api/v0/pkgs/list';
 
     fetch(url).then((response) => {
@@ -93,6 +91,11 @@ class App extends React.Component {
       this.setState({fetchFailed: true});
     });
   }
+
+  componentDidMount() {
+    this.loadDashboard()
+    this.loadPkgs()
+  }
 }
 
 module.exports = {App};

src/Body.js

@@ -11,6 +11,11 @@ class Body extends React.Component {
 
     return (
       <React.Fragment>
+      {!fetchFailed && !suites.length &&
+      <section className="section">
+        <p><b>Loading packages...</b></p>
+      </section>
+      }
       { fetchFailed &&
       <section className="section">
         <div className="tile box has-background-danger">

src/Header.js

@@ -59,7 +59,7 @@ class Header extends React.Component {
             <br/>
             <ul className="repo-summary">
             {!fetchFailed && !dashboard &&
-            <p><b>Loading...</b></p>
+            <p><b>Loading stats...</b></p>
             }
             {!fetchFailed && dashboard &&
             <li key="overall">Arch Linux is <span className="has-text-weight-bold">{ overallStats.percentage }%</span> reproducible with <span className="bad has-text-weight-bold">{ overallStats.bad } bad</span>  <span className="unknown has-text-weight-bold">{ overallStats.unknown } unknown</span> and <span className="good has-text-weight-bold">{ overallStats.good } good</span> packages.</li>