permalinks: placeholder for unloaded nodes, author-content spacing

This commit is contained in:
James Acklin 2021-05-18 09:16:31 -04:00
parent e5514b1386
commit c7e9b82e68
2 changed files with 18 additions and 4 deletions

View File

@ -57,7 +57,7 @@ function TranscludedLinkNode(props: {
/>
<Box
borderRadius='2'
mt='1'
mt='3'
ml='44px'
mr='3'
p='2'
@ -128,7 +128,7 @@ function TranscludedComment(props: {
date={comment.post?.['time-sent']}
group={group}
/>
<Box pl="44px" pt='1'>
<Box pl="44px" pt='2'>
<GraphContent
api={api}
transcluded={transcluded}
@ -182,7 +182,7 @@ function TranscludedPublishNode(props: {
date={post.post?.['time-sent']}
group={group}
/>
<Text pl='44px' fontSize="2" fontWeight="medium">
<Text mt='3' pl='44px' fontSize="2" fontWeight="medium">
{(post.post.contents[0] as TextContent)?.text}
</Text>
<Box pl="44px" pr='3'>
@ -242,7 +242,7 @@ export function TranscludedPost(props: {
date={post?.['time-sent']}
group={group}
/>
<Box pl='44px' pt='2' pr='3'>
<Box pl='44px' pt='3' pr='3'>
<MentionText
api={api}
transcluded={transcluded}

View File

@ -13,6 +13,15 @@ import useMetadataState from "~/logic/state/metadata";
import { GroupLink } from "~/views/components/GroupLink";
import { TranscludedNode } from "./TranscludedNode";
function Placeholder() {
return (
<Row margin='12px' marginBottom='0' height='4'>
<Box backgroundColor='washedGray' size='4' marginRight='2' borderRadius='2' />
<Box backgroundColor='washedGray' heigh='4' width='75%' borderRadius='2' />
</Row>
)
}
function GroupPermalink(props: { group: string; api: GlobalApi }) {
const { group, api } = props;
return (
@ -47,6 +56,7 @@ function GraphPermalink(
])
);
const [errored, setErrored] = useState(false);
const [loading, setLoading] = useState(false);
const association = useMetadataState(
useCallback(s => s.associations.graph[graph] as Association | null, [
graph
@ -60,9 +70,12 @@ function GraphPermalink(
return;
}
try {
setLoading(true);
await api.graph.getNode(ship, name, index);
setLoading(false);
} catch (e) {
console.log(e);
setLoading(false);
setErrored(true);
}
})();
@ -108,6 +121,7 @@ function GraphPermalink(
navigate(e);
}}
>
{loading && Placeholder()}
{showTransclusion && index && (
<TranscludedNode
api={api}