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

@@ -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>
     );
 }

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 className={!pagination ? 'mt-4' : ''}>
+            </div>
-                        {commentsElements}
+            <div>
-                    </div>
+                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
-                    <div>
+            </div>
-                        { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
-                    </div>
-                </>
-                : <Loading />}
         </section>
     );
 };

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>
     );

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
             };

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';
     }
 }