diff --git a/src/app/available-packages-config-panel.coffee b/src/app/available-packages-config-panel.coffee
index 4fe3b709c..55db020d5 100644
--- a/src/app/available-packages-config-panel.coffee
+++ b/src/app/available-packages-config-panel.coffee
@@ -7,10 +7,13 @@ packageManager = require 'package-manager'
 module.exports =
 class AvailablePackagesConfigPanel extends ConfigPanel
   @content: ->
-    @div class: 'available-packages'
+    @div class: 'available-packages', =>
+      @div outlet: 'loadingArea', class: 'alert alert-info loading-area', =>
+        @span 'Loading available packages\u2026'
 
   initialize: ->
     packageManager.getAvailable (error, packages) =>
+      @loadingArea.hide()
       if error?
         console.error(error.stack ? error)
       else
diff --git a/static/config.less b/static/config.less
index 866130061..cabf22bbd 100644
--- a/static/config.less
+++ b/static/config.less
@@ -151,6 +151,19 @@
     margin-left: 10px;
   }
 
+  .loading-area {
+    span {
+      .mini-icon(hourglass);
+
+      &:before {
+        font-size: 1.1em;
+        width: 1.1em;
+        height: 1.1em;
+        margin-right: 5px;
+      }
+    }
+  }
+
   .package-panel {
     .nav {
       margin-bottom: 10px;