From c7e9b82e68db79b43652b48835ac3169607ff1dd Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Tue, 18 May 2021 09:16:31 -0400
Subject: [PATCH 1/4] permalinks: placeholder for unloaded nodes,
 author-content spacing

---
 .../src/views/apps/permalinks/TranscludedNode.tsx  |  8 ++++----
 pkg/interface/src/views/apps/permalinks/embed.tsx  | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
index ddfcaae8f..994803cd7 100644
--- a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
+++ b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
@@ -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}
diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index 1f6445490..94df9eaba 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -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}

From 8f074592f2becb9cdc4fd68a912cbaf885a53b2b Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Tue, 18 May 2021 09:17:55 -0400
Subject: [PATCH 2/4] permalinks: placeholder formatting fix

---
 .../src/views/apps/permalinks/embed.tsx        | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index 94df9eaba..7f2196a78 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -15,11 +15,21 @@ 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 margin="12px" marginBottom="0" height="4">
+      <Box
+        backgroundColor="washedGray"
+        size="4"
+        marginRight="2"
+        borderRadius="2"
+      />
+      <Box
+        backgroundColor="washedGray"
+        height="4"
+        width="75%"
+        borderRadius="2"
+      />
     </Row>
-  )
+  );
 }
 
 function GroupPermalink(props: { group: string; api: GlobalApi }) {

From fed10bc07c594c531858e85c87b9525b8e8fb353 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Tue, 18 May 2021 14:42:59 -0400
Subject: [PATCH 3/4] permalinks; conditional addtional rows, dependent on
 graph type

---
 .../src/views/apps/permalinks/embed.tsx       | 65 +++++++++++++------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index 7f2196a78..7df0ad8f8 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -1,6 +1,7 @@
 import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from "@tlon/indigo-react";
 import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
 import React, { useCallback, useEffect, useState } from "react";
+import _ from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import {
@@ -13,22 +14,44 @@ import useMetadataState from "~/logic/state/metadata";
 import { GroupLink } from "~/views/components/GroupLink";
 import { TranscludedNode } from "./TranscludedNode";
 
-function Placeholder() {
+function Placeholder(type) {
+  const lines = (type) => {
+    switch (type) {
+      case 'publish':
+        return 5;
+      case 'post':
+        return 3;
+      default:
+        return 1;
+    }
+  }
   return (
-    <Row margin="12px" marginBottom="0" height="4">
-      <Box
-        backgroundColor="washedGray"
-        size="4"
-        marginRight="2"
-        borderRadius="2"
-      />
-      <Box
-        backgroundColor="washedGray"
-        height="4"
-        width="75%"
-        borderRadius="2"
-      />
-    </Row>
+    <>
+      <Row mt='12px' ml='12px' mb='6px' height="4">
+        <Box
+          backgroundColor="washedGray"
+          size="4"
+          marginRight="2"
+          borderRadius="2"
+        />
+        <Box
+          backgroundColor="washedGray"
+          height="4"
+          width="25%"
+          borderRadius="2"
+        />
+      </Row>
+      {_.times(lines(type), () => (
+        <Row margin="6px" ml='44px' mr='12px' height="4">
+          <Box
+            backgroundColor="washedGray"
+            height="4"
+            width="100%"
+            borderRadius="2"
+          />
+        </Row>
+      ))}
+    </>
   );
 }
 
@@ -131,8 +154,8 @@ function GraphPermalink(
         navigate(e);
       }}
     >
-      {loading && Placeholder()}
-      {showTransclusion && index && (
+      {loading && association && Placeholder(association.metadata.config.graph)}
+      {showTransclusion && index && !loading && (
         <TranscludedNode
           api={api}
           transcluded={transcluded + 1}
@@ -141,7 +164,7 @@ function GraphPermalink(
           showOurContact={showOurContact}
         />
       )}
-      {association && !isInSameResource && (
+      {association && !isInSameResource && !loading && (
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
@@ -150,7 +173,7 @@ function GraphPermalink(
           permalink={permalink}
         />
       )}
-      {association && isInSameResource && transcluded === 2 && (
+      {association && isInSameResource && transcluded === 2 && !loading && (
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
@@ -159,8 +182,8 @@ function GraphPermalink(
           permalink={permalink}
         />
       )}
-      {isInSameResource && transcluded !== 2 && <Row height="12px" />}
-      {!association && (
+      {isInSameResource && transcluded !== 2 && <Row height='2' />}
+      {!association && !loading && (
         <PermalinkDetails
           icon="Groups"
           showDetails={false}

From ee02f61d7bd93d8c14e8dd0cc920ed80e8162611 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Tue, 18 May 2021 16:14:58 -0400
Subject: [PATCH 4/4] permalinks: fix tsc error

---
 pkg/interface/src/views/apps/permalinks/embed.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index 7df0ad8f8..1f98a64c1 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -154,7 +154,7 @@ function GraphPermalink(
         navigate(e);
       }}
     >
-      {loading && association && Placeholder(association.metadata.config.graph)}
+      {loading && association && Placeholder((association.metadata.config as GraphConfig).graph)}
       {showTransclusion && index && !loading && (
         <TranscludedNode
           api={api}