From 4a4db114f0a0bdb78944f7a19c18caa9297950d3 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 20 Jul 2022 11:01:30 +0200
Subject: [PATCH] Updated loading state to kick in earlier

refs https://github.com/TryGhost/Team/issues/1692

- Moved Loading component to App (so it shows as a placeholder)
- Disabled loading settings from the API (not used for now), to speed up loading
---
 apps/comments-ui/src/App.js                    |  6 ++----
 apps/comments-ui/src/components/CommentsBox.js | 17 ++++++-----------
 apps/comments-ui/src/components/Loading.js     |  2 +-
 apps/comments-ui/src/utils/api.js              |  3 ++-
 apps/comments-ui/src/utils/helpers.js          |  2 +-
 5 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js
index 589140c731..144739edce 100644
--- a/apps/comments-ui/src/App.js
+++ b/apps/comments-ui/src/App.js
@@ -8,6 +8,7 @@ import {hasMode} from './utils/check-mode';
 import setupGhostApi from './utils/api';
 import CommentsBox from './components/CommentsBox';
 import {useEffect} from 'react';
+import Loading from './components/Loading';
 
 function AuthFrame({adminUrl, onLoad, initStatus}) {
     useEffect(function () {
@@ -26,12 +27,9 @@ function AuthFrame({adminUrl, onLoad, initStatus}) {
 }
 
 function CommentsBoxContainer({done, appVersion}) {
-    if (!done) {
-        return null;
-    }
     return (
         <ShadowRoot appVersion={appVersion}>
-            <CommentsBox />
+            {done ? <CommentsBox /> : <Loading />}
         </ShadowRoot>
     );
 }
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index c06cde0cc0..fbf4fd0060 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -1,7 +1,6 @@
 import React, {useContext} from 'react';
 import AppContext from '../AppContext';
 import NotSignedInBox from './NotSignedInBox';
-import Loading from './Loading';
 import Form from './Form';
 import Comment from './Comment';
 import Pagination from './Pagination';
@@ -57,16 +56,12 @@ const CommentsBox = (props) => {
     return (
         <section className={'ghost-display ' + containerClass} style={style}>
             <Pagination />
-            {comments ?
-                <>
-                    <div className={!pagination ? 'mt-4' : ''}>
-                        {commentsElements}
-                    </div>
-                    <div>
-                        { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
-                    </div>
-                </>
-                : <Loading />}
+            <div className={!pagination ? 'mt-4' : ''}>
+                {commentsElements}
+            </div>
+            <div>
+                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
+            </div>
         </section>
     );
 };
diff --git a/apps/comments-ui/src/components/Loading.js b/apps/comments-ui/src/components/Loading.js
index c715252de8..7f1283b4c9 100644
--- a/apps/comments-ui/src/components/Loading.js
+++ b/apps/comments-ui/src/components/Loading.js
@@ -3,7 +3,7 @@ import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
 
 function Loading() {
     return (
-        <div class="flex items-center justify-center w-full h-36">
+        <div className="ghost-display flex items-center justify-center w-full h-36">
             <SpinnerIcon className="w-12 h-12 mb-6 fill-[rgba(0,0,0,0.3)] dark:fill-[rgba(255,255,255,0.6)]" />
         </div>
     );
diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js
index 8013124711..8e82101469 100644
--- a/apps/comments-ui/src/utils/api.js
+++ b/apps/comments-ui/src/utils/api.js
@@ -203,7 +203,8 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
         let settings = {};
 
         try {
-            settings = await api.site.settings();
+            // for now we don't need to fetch all the settings (the ones we need are passed via the script tag data attributes)
+            //settings = await api.site.settings();
             site = {
                 ...settings
             };
diff --git a/apps/comments-ui/src/utils/helpers.js b/apps/comments-ui/src/utils/helpers.js
index 067bd52d44..bff45a9ff5 100644
--- a/apps/comments-ui/src/utils/helpers.js
+++ b/apps/comments-ui/src/utils/helpers.js
@@ -109,6 +109,6 @@ export function getBundledCssLink({appVersion}) {
     if (process.env.NODE_ENV === 'production' && appVersion) {
         return `https://unpkg.com/@tryghost/comments-ui@~${appVersion}/umd/main.css`;
     } else {
-        return 'https://comments.localhost/main.css';
+        return 'http://localhost:4000/main.css';
     }
 }