💄 Add comments plug-in loading style.

assets/css/_common/components/third-party/utterances.scss

@@ -1,6 +1,7 @@
-@if $utterances_enable {
-  .utterances {
-    //max-width: unset;
-    min-height: 300px;
-  }
-}
+// TODO maybe use for next time
+// @if $utterances_enable {
+//   .utterances {
+//     max-width: unset;
+//     min-height: 300px;
+//   }
+// }

assets/css/_common/scaffolding/comments.scss

@@ -43,8 +43,26 @@
     margin-top: 60px;
   }
 
+  min-height: 300px;
   overflow: hidden;
 
+  .comment-loading {
+    @if $sidebar_position == 'right' {
+      padding-right: $sidebar-desktop + $sidebar-offset;
+    } @else {
+      padding-left: $sidebar-desktop + $sidebar-offset;
+    }
+    
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    text-align: center;
+    font-size: 2em;
+  }
+
   .comment-head {
     margin-bottom: 20px;
 
@@ -70,7 +88,7 @@
         }
         width: max-content;
         border-radius: 8px;
-        background: #eee;
+        background: var(--card-bg-color);
 
         .first-comment {
           color: $first_comment_color;
@@ -154,11 +172,6 @@
       $second_comment_display: block;
     }
 
-    .comment-wrap .storage {
-      display: block;
-      animation: 0.5s ease 0s 1 normal none running tabshow;
-    }
-
     .comment-wrap>div:nth-child(1) {
       display: $first_comment_display;
     }

layouts/partials/_thirdparty/comment/comm_loading.html

@@ -0,0 +1,3 @@
+<div class="comment-loading">
+  <i class="fa fa-sync fa-spin"></i>
+</div>

layouts/partials/_thirdparty/comment/waline.html

@@ -15,7 +15,8 @@
     wordLimit: {{ .wordLimit }},
     requiredMeta: {{ .requiredMeta }},
     serverURL: "{{ .serverURL }}",
-    lang: "{{ $.Lang }}"
+    lang: "{{ $.Lang }}",
+    dark: "auto"
   });
 </script>
 {{- end }}  

layouts/partials/comments.html

@@ -28,11 +28,15 @@
   {{- if $tc }}
   {{- range $sn }}
     <div>
+      {{- partial "_thirdparty/comment/comm_loading.html" . }}
       {{- partial (printf $cp (lower .name)) $root }}
     </div>
   {{- end }}
   {{- else }}
-    <div>{{- partial (printf $cp $fc) $root }}</div>
+    <div>      
+      {{- partial "_thirdparty/comment/comm_loading.html" . }}
+      {{- partial (printf $cp $fc) $root }}
+    </div>
   {{- end }}
   </div>
 </div>