Merge pull request #5296 from cocowalla/feat/loading-enhancement

Enable CSS transitions for loading (fixes #5295)

src/bootstrap-table.js

@@ -2845,7 +2845,7 @@ class BootstrapTable {
   }
 
   showLoading () {
-    this.$tableLoading.css('display', 'flex')
+    this.$tableLoading.toggleClass('open', true)
 
     let fontSize = this.options.loadingFontSize
 
@@ -2860,7 +2860,7 @@ class BootstrapTable {
   }
 
   hideLoading () {
-    this.$tableLoading.css('display', 'none')
+    this.$tableLoading.toggleClass('open', false)
   }
 
   togglePagination () {

src/themes/_theme.scss

@@ -199,12 +199,20 @@
       .fixed-table-loading {
         align-items: center;
         background: $background;
-        display: none;
+        display: flex;
         justify-content: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         z-index: 1000;
+        transition: visibility 0s, opacity 0.15s ease-in-out;
+        opacity: 0;
+        visibility: hidden;
+
+        &.open {
+          visibility: visible;
+          opacity: 1;
+        }
 
         .loading-wrap {
           align-items: baseline;