diff --git a/octoprint_SpoolManager/static/js/SpoolManager-SpoolSelectionTableComp.js b/octoprint_SpoolManager/static/js/SpoolManager-SpoolSelectionTableComp.js
index 6a565e57..1a055b33 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager-SpoolSelectionTableComp.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager-SpoolSelectionTableComp.js
@@ -62,6 +62,7 @@ function SpoolSelectionTableComp() {
         self.allColors = params.allColorsKOArray;
 
         self.selectSpoolFunction = params.selectSpoolFunction;
+        self.isLoadingSpoolsSelectorData = params.isLoadingSpoolsSelectorData;
 
         ////////////////////////////////////////////////////////////////////// internal field variables
 
diff --git a/octoprint_SpoolManager/static/js/SpoolManager.js b/octoprint_SpoolManager/static/js/SpoolManager.js
index 1ba9bf3e..b61f558f 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager.js
@@ -107,6 +107,8 @@ $(function() {
 
         let hasInitializedSpoolsSelector = false;
 
+        self.isLoadingSpoolsSelectorData = ko.observable(false);
+
         //////////////////////////////////////////////////////////////////////////////////////////////// HELPER FUNCTION
         const handleSpoolDialogClose = (params) => {
             const {
@@ -539,7 +541,7 @@ $(function() {
             self.selectSpoolForSidebar(toolIndex, null);
         }
 
-        const loadSpoolSelectorData = async function () {
+        const _loadSpoolSelectorDataCore = async function () {
             const fetchSpoolsQueryParams = {
                 filterName: "all",
                 from: 0,
@@ -574,6 +576,15 @@ $(function() {
             });
             self.allSpoolsForSidebar(allSpoolItems);
         };
+        const loadSpoolSelectorData = async function () {
+            self.isLoadingSpoolsSelectorData(true);
+
+            const result = await _loadSpoolSelectorDataCore();
+
+            self.isLoadingSpoolsSelectorData(false);
+
+            return result;
+        };
 
         const updateAvailableSpoolSlots = () => {
             const currentProfileData = self.settingsViewModel.printerProfiles.currentProfileData();
diff --git a/octoprint_SpoolManager/templates/SpoolManager_dialog_editSpool.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_dialog_editSpool.jinja2
index 512418da..8029448c 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_dialog_editSpool.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_dialog_editSpool.jinja2
@@ -601,7 +601,8 @@
                                         allMaterialsKOArray: spoolDialog.allMaterials,
                                         allVendorsKOArray: spoolDialog.allVendors,
                                         allColorsKOArray: spoolDialog.allColors,
-                                        selectSpoolFunction: spoolDialog.copySpoolItemFromTemplate
+                                        selectSpoolFunction: spoolDialog.copySpoolItemFromTemplate,
+                                        isLoadingSpoolsSelectorData: ko.observable(false)
                                         "></spm-select-spool-table>
     </div>
     <div class="modal-footer">
diff --git a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
index 23adc041..8afdf958 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
@@ -30,13 +30,14 @@
                 <!-- /ko -->
 
             </div>
-            <hr/>
+            <hr style="margin: 10px 0;"/>
 
             <spm-select-spool-table params="allSpoolsKOArray: allSpoolsForSidebar,
                                             allMaterialsKOArray: spoolDialog.allMaterials,
                                             allVendorsKOArray: spoolDialog.allVendors,
                                             allColorsKOArray: spoolDialog.allColors,
-                                            selectSpoolFunction: sidebarSelectSpoolFromDialog
+                                            selectSpoolFunction: sidebarSelectSpoolFromDialog,
+                                            isLoadingSpoolsSelectorData: isLoadingSpoolsSelectorData
                                             "></spm-select-spool-table>
         </div>
     </div>
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
index 0f6bb3e6..2b8db421 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
@@ -1,30 +1,36 @@
 <span id="spm-select-spool-table"  style="display: none">
-    <div>
-        <span class="filter pull-left">
+    <div style="display: flex; justify-content: space-between;">
+        <div class="filter">
                 <div style="margin-top:5px; margin-right:40px" class="pull-right search-query-with-clear active-clear" data-bind="css: {'active-clear': filterSelectionQuery}">
                     <input type="search" class="input-block search-query" data-bind="value: filterSelectionQuery, valueUpdate: 'input'" placeholder="Filter...">
                     <span class="search-clear" data-bind="click: clearFilterSelectionQuery"><i class="fas fa-times"></i></span>
                 </div>
-        </span>
-        <span >
+        </div>
+        <div>
             <div>
                 <label class="checkbox">
-                    <input style="vertical-align:baseline" type="checkbox"
-                           data-bind="checked: hideEmptySpools">
+                    <input
+                        style="vertical-align: baseline"
+                        type="checkbox"
+                        data-bind="checked: hideEmptySpools"
+                    />
                     Hide empty spools
                 </label>
             </div>
             <div >
                 <label class="checkbox">
-                    <input style="vertical-align:baseline" type="checkbox"
-                           data-bind="checked: hideInActiveSpools">
+                    <input
+                        style="vertical-align: baseline"
+                        type="checkbox"
+                        data-bind="checked: hideInActiveSpools"
+                    />
                     Hide inactive spools
                 </label>
             </div>
-        </span>
+        </div>
     </div>
-    <div>
-        <span class="pull-left">
+    <div style="display: flex; justify-content: space-between;">
+        <div>
             <small>
                 Sort by:
                 <a href="#" data-bind="click: function() { sortSpoolArray('displayName'); }">Name <span data-bind="visible: currentSortField()=='displayName'">(<span data-bind="text: currentSortOder"></span>)</span></a> |
@@ -33,93 +39,108 @@
                 <a href="#" data-bind="click: function() { sortSpoolArray('remaining'); }">Remaining  <span data-bind="visible: currentSortField()=='remaining'">(<span data-bind="text: currentSortOder"></span>)</span></a> |
                 <a href="#" data-bind="click: function() { sortSpoolArray('material'); }">Material  <span data-bind="visible:  currentSortField()=='material'">(<span data-bind="text: currentSortOder"></span>)</span></a>
             </small>
-        </span>
-        <span class="pull-right">
-            <small>
-                Show/Total: <b><span data-bind="text: totalShown"></span> / <span data-bind="text: allSpools().length"></span></b>
-            </small>
-        </span>
+        </div>
     </div>
 
-    <div class="pull-left">
-        <small>
-            Filter:
-            {# Material - Filter #}
-            <span class="dropdown  tabdrop">
-                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Material (<span data-bind="text: buildFilterLabel('material')" ></span>)
-                <b class="caret"></b></a>
-                <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
-                    <li>
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" data-bind="checked:showAllMaterialsForFilter , click:doFilterSelectAll($data, 'material')"><i>select/deselect all</i>
-                            </label>
-                        </div>
-                    </li>
-                    <span data-bind="foreach: allMaterials">
-                        <li data-bind="visible: $data != ''">
+    <div style="display: flex; justify-content: space-between;">
+        <div>
+            <small>
+                Filter:
+                {# Material - Filter #}
+                <span class="dropdown  tabdrop">
+                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Material (<span data-bind="text: buildFilterLabel('material')" ></span>)
+                    <b class="caret"></b></a>
+                    <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
+                        <li>
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedMaterialsForFilter"><span data-bind="text: $data"></span>
+                                    <input type="checkbox" data-bind="checked:showAllMaterialsForFilter , click:doFilterSelectAll($data, 'material')"><i>select/deselect all</i>
                                 </label>
                             </div>
                         </li>
-                    </span>
-                </ul>
-            </span>
-            {# Vendor - Filter #}
-            <span class="dropdown  tabdrop">
-                |  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Vendor (<span data-bind="text: buildFilterLabel('vendor')" ></span>)
-                    <b class="caret"></b></a>
-                <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
-                    <li>
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" data-bind="checked:showAllVendorsForFilter , click:doFilterSelectAll($data, 'vendor')"><i>select/deselect all</i>
-                            </label>
-                        </div>
-                    </li>
-                    <span data-bind="foreach: allVendors">
-                        <li data-bind="visible: $data != ''">
+                        <span data-bind="foreach: allMaterials">
+                            <li data-bind="visible: $data != ''">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedMaterialsForFilter"><span data-bind="text: $data"></span>
+                                    </label>
+                                </div>
+                            </li>
+                        </span>
+                    </ul>
+                </span>
+                {# Vendor - Filter #}
+                <span class="dropdown  tabdrop">
+                    |  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Vendor (<span data-bind="text: buildFilterLabel('vendor')" ></span>)
+                        <b class="caret"></b></a>
+                    <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
+                        <li>
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedVendorsForFilter"><span data-bind="text: $data"></span>
+                                    <input type="checkbox" data-bind="checked:showAllVendorsForFilter , click:doFilterSelectAll($data, 'vendor')"><i>select/deselect all</i>
                                 </label>
                             </div>
                         </li>
-                    </span>
-                </ul>
-            </span>
-            {# Color - Filter #}
-            <span class="dropdown  tabdrop">
-                |  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Color (<span data-bind="text: buildFilterLabel('color')" ></span>)
-                    <b class="caret"></b></a>
-
-                <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
-                    <li>
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" data-bind="checked:showAllColorsForFilter , click:doFilterSelectAll($data, 'color')"><i>select/deselect all</i>
-                            </label>
-                        </div>
-                    </li>
+                        <span data-bind="foreach: allVendors">
+                            <li data-bind="visible: $data != ''">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedVendorsForFilter"><span data-bind="text: $data"></span>
+                                    </label>
+                                </div>
+                            </li>
+                        </span>
+                    </ul>
+                </span>
+                {# Color - Filter #}
+                <span class="dropdown  tabdrop">
+                    |  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Color (<span data-bind="text: buildFilterLabel('color')" ></span>)
+                        <b class="caret"></b></a>
 
-                    <span data-bind="foreach: allColors">
-                        <li data-bind="visible: $data.colorCode != ''">
+                    <ul class="dropdown-menu keep-open pre-scrollable" style="padding-left:10px" >
+                        <li>
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" data-bind="checkedValue: $data.colorId, checked: $parent.selectedColorsForFilter"></input><span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }" ></span><span data-bind="text: $data.colorName"></span>
+                                    <input type="checkbox" data-bind="checked:showAllColorsForFilter , click:doFilterSelectAll($data, 'color')"><i>select/deselect all</i>
                                 </label>
                             </div>
                         </li>
-                    </span>
-                </ul>
-            </span>
-        </small>
+
+                        <span data-bind="foreach: allColors">
+                            <li data-bind="visible: $data.colorCode != ''">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" data-bind="checkedValue: $data.colorId, checked: $parent.selectedColorsForFilter"></input><span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }" ></span><span data-bind="text: $data.colorName"></span>
+                                    </label>
+                                </div>
+                            </li>
+                        </span>
+                    </ul>
+                </span>
+            </small>
+        </div>
+        <div>
+            <small>
+                Shown / Total: <b><span data-bind="text: totalShown"></span> / <span data-bind="text: allSpools().length"></span></b>
+            </small>
+        </div>
     </div>
-    {# Spool Table   #}
+
+    <hr style="margin: 10px 0;"/>
+
     <div>
-        <table class="table table-hover table-bordered">
+        <div data-bind="visible: isLoadingSpoolsSelectorData" style="margin: 16px; text-align: center;">
+            <i class='fa fa-2xl fa-spinner fa-spin' ></i>
+        </div>
+
+        <div data-bind="visible: !isLoadingSpoolsSelectorData() && allSpools().length == 0" style="margin: 16px; text-align: center;">
+            <small class="muted">No spools to display...</small>
+        </div>
+
+        <table
+            data-bind="visible: !isLoadingSpoolsSelectorData() && allSpools().length > 0"
+            class="table table-hover table-bordered"
+        >
             <tbody data-bind="foreach: allSpools">
                 <tr class="entry clickable" data-bind="click: $parent.selectSpoolFunction.bind($data),
                                                        visible: isFilteredForSelection() == false">