From 6eb32599bd4410b333df6e330b5295ee3a016aa7 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 20 Jul 2022 17:03:45 +0200
Subject: [PATCH] Added darkmode support for loading spinner

---
 apps/comments-ui/src/App.js                   |  3 +-
 apps/comments-ui/src/components/Comment.js    |  2 +-
 .../comments-ui/src/components/CommentsBox.js | 47 ++++++++++++-------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js
index 5d0e76423e..de119df7fd 100644
--- a/apps/comments-ui/src/App.js
+++ b/apps/comments-ui/src/App.js
@@ -7,7 +7,6 @@ import AppContext from './AppContext';
 import {hasMode} from './utils/check-mode';
 import setupGhostApi from './utils/api';
 import CommentsBox from './components/CommentsBox';
-import Loading from './components/Loading';
 
 function AuthFrame({adminUrl, onLoad}) {
     const iframeStyle = {
@@ -22,7 +21,7 @@ function AuthFrame({adminUrl, onLoad}) {
 function CommentsBoxContainer({done, appVersion}) {
     return (
         <ShadowRoot appVersion={appVersion}>
-            {done ? <CommentsBox /> : <Loading />}
+            <CommentsBox done={done} />
         </ShadowRoot>
     );
 }
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index e9fdb42e4d..4c1e50a86f 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -41,7 +41,7 @@ const Comment = (props) => {
 
     if (isInEditMode) {
         return (
-            <Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} avatarSaturation={props.avatarSaturation} />
+            <Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
         );
     } else {
         return (
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index c3fbc43a92..6705d43bed 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -6,6 +6,29 @@ import Comment from './Comment';
 import Pagination from './Pagination';
 import NotPaidBox from './NotPaidBox';
 import Empty from './Empty';
+import Loading from './Loading';
+
+const CommentsBoxContent = (props) => {
+    const {pagination, member, comments, commentsEnabled} = useContext(AppContext);
+    const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
+
+    const commentsCount = comments.length;
+
+    const paidOnly = commentsEnabled === 'paid';
+    const isPaidMember = member && !!member.paid;
+
+    return (
+        <>
+            <Pagination />
+            <div className={!pagination ? 'mt-4' : ''}>
+                {commentsCount === 0 ? <Empty /> : commentsElements}
+            </div>
+            <div>
+                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
+            </div>
+        </>
+    );
+};
 
 const CommentsBox = (props) => {
     const luminance = (r, g, b) => {
@@ -23,11 +46,12 @@ const CommentsBox = (props) => {
         var darkest = Math.min(lum1, lum2);
         return (brightest + 0.05) / (darkest + 0.05);
     };
+    const {accentColor, colorScheme} = useContext(AppContext);
 
     const darkMode = () => {
-        if (props.colorScheme === 'light') {
+        if (colorScheme === 'light') {
             return false;
-        } else if (props.colorScheme === 'dark') {
+        } else if (colorScheme === 'dark') {
             return true;
         } else {
             const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
@@ -41,28 +65,15 @@ const CommentsBox = (props) => {
         }
     };
 
-    const {accentColor, pagination, member, comments, commentsEnabled} = useContext(AppContext);
-
-    const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
-
     const containerClass = darkMode() ? 'dark' : '';
-    const commentsCount = comments.length;
     const style = {
         '--gh-accent-color': accentColor ?? 'blue'
     };
-
-    const paidOnly = commentsEnabled === 'paid';
-    const isPaidMember = member && !!member.paid;
-
     return (
         <section className={'ghost-display ' + containerClass} style={style}>
-            <Pagination />
-            <div className={!pagination ? 'mt-4' : ''}>
-                {commentsCount === 0 ? <Empty /> : commentsElements}
-            </div>
-            <div>
-                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
-            </div>
+            {props.done ? <>
+                <CommentsBoxContent />
+            </> : <Loading />}
         </section>
     );
 };