feat(conversation-list): loading more in conversation list

Author: supersnager

themes/default/_variables.scss

@@ -276,6 +276,13 @@ $conversation-header-actions-margin: 0 0 0 0.5em;
 // Colors
 $conversation-list-color: $color-text !default;
 $conversation-list-bg-color: transparent !default;
+$conversation-list-loading-more-bg-color: transparent !default;
+
+// Sizes
+$conversation-list-loading-more-height: 1.2em !default;
+
+// Spacing
+$conversation-list-loading-more-padding: 2px 0 !default;
 
 // Expansion panel
 //
@@ -650,7 +657,7 @@ $message-list-loading-more-height: 1.2em !default;
 
 // Spacing
 $message-list-scroll-wrapper-padding: 0 1.2em 0 0.8em !default;
-$message-list-loading-more-padding: 2px 0;
+$message-list-loading-more-padding: 2px 0 !default;
 $message-list-message-separator-margin-top: 1.2em !default;
 
 // Message separator

themes/default/components/_conversation-list.scss

@@ -14,7 +14,39 @@
   color: $conversation-list-color;
   background-color: $conversation-list-bg-color;
 
-  & > ul {
+  & > div > ul {
     @include reset-list;
   }
+  
+  &__loading-more {
+    box-sizing: content-box;
+    @include flex-row;
+    justify-content: center;
+    position:absolute;
+    background-color: $conversation-list-loading-more-bg-color;
+    padding: $conversation-list-loading-more-padding;
+    bottom:0;
+    left:0;
+    right:0;
+    height: $conversation-list-loading-more-height;
+    z-index: 1;
+
+    .#{$prefix}-loader {
+      width:$conversation-list-loading-more-height;
+      height:$conversation-list-loading-more-height;
+    }
+    .#{$prefix}-loader::before,
+    .#{$prefix}-loader::after
+    {
+      width:100%;
+      height:100%;
+    }
+
+  }
+
+  // Perfect scrollbar fix to hide loading more indicator
+  .ps__rail-y {
+    z-index:2;
+  }
+  
 }