mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Added a proper loading component for comments plus a few tweaks
- New loader component for when comments come in - New spinner used for loader and the report button progress - We don't seem to have a working loading state to show it though refs https://github.com/TryGhost/Team/issues/1692
This commit is contained in:
James Morris
parent
a1b1dd9dad
commit
dce15950cd
4 changed files with 35 additions and 10 deletions
|
|
@ -1,6 +1,7 @@
|
|||
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';
|
||||
|
|
@ -41,7 +42,7 @@ const CommentsBox = (props) => {
|
|||
|
||||
const {accentColor, pagination, member, comments} = useContext(AppContext);
|
||||
|
||||
const commentsElements = !comments ? 'Loading...' : comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
|
||||
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
|
||||
|
||||
const containerClass = darkMode() ? 'dark' : '';
|
||||
const commentsCount = comments.length;
|
||||
|
|
@ -52,12 +53,16 @@ const CommentsBox = (props) => {
|
|||
return (
|
||||
<section className={'ghost-display ' + containerClass} style={style}>
|
||||
<Pagination />
|
||||
<div className={!pagination ? 'mt-4' : ''}>
|
||||
{commentsElements}
|
||||
</div>
|
||||
<div>
|
||||
{ member ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotSignedInBox /> }
|
||||
</div>
|
||||
{comments ?
|
||||
<>
|
||||
<div className={!pagination ? 'mt-4' : ''}>
|
||||
{commentsElements}
|
||||
</div>
|
||||
<div>
|
||||
{ member ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotSignedInBox /> }
|
||||
</div>
|
||||
</>
|
||||
: <Loading />}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
12
apps/comments-ui/src/components/Loading.js
Normal file
12
apps/comments-ui/src/components/Loading.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
|
||||
|
||||
function Loading() {
|
||||
return (
|
||||
<div class="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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loading;
|
||||
|
|
@ -18,14 +18,14 @@ const ReportDialog = (props) => {
|
|||
|
||||
let buttonIcon = null;
|
||||
if (props.progress === 'sending') {
|
||||
buttonIcon = <SpinnerIcon className="w-[16px] h-[16px] mr-2" />;
|
||||
buttonIcon = <SpinnerIcon className="w-[20px] h-[20px] mr-2 fill-white" />;
|
||||
} else if (props.progress === 'sent') {
|
||||
buttonIcon = <SuccessIcon className="w-[16px] h-[16px] mr-2" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GenericDialog show={props.show} cancel={props.cancel}>
|
||||
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3">You sure you want to report?</h1>
|
||||
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">You sure you want to report?</h1>
|
||||
<p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
|
||||
<div className="mt-10">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1 +1,9 @@
|
|||
<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(0 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(30 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(60 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(90 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(120 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(150 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(180 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(210 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(240 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(270 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(300 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(330 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
|
||||
<div class="loader loader--style3" title="2">
|
||||
<svg version="1.1" id="loader-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
||||
<path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 685 B |
Loading…
Add table
Reference in a new issue