diff --git a/src/App.js b/src/App.js
index d5887f2806641157e1ebbbd696a565f241ec7bca..011ab33c7f178ceeaf7ba273583dc6f6224090e6 100644
--- a/src/App.js
+++ b/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};
diff --git a/src/Body.js b/src/Body.js
index 9ff0add1c27e42cd9641183bbf8c738403718c30..b35a39e5baf9a77e4884e9c3eb39b6a02b3dd227 100644
--- a/src/Body.js
+++ b/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">
diff --git a/src/Header.js b/src/Header.js
index 70f4d24e130d5051bb17f3a987e155886cd81964..63bcb0d79abef7c7c11ca8517afdc2ed6d6eade6 100644
--- a/src/Header.js
+++ b/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>