feat(TextObjectPreview): cache file's fetched content

components/core/MarkdownFrame.js

@@ -6,6 +6,7 @@ import * as Strings from "~/common/strings";
 import { css } from "@emotion/react";
 import { Markdown } from "~/components/system/components/Markdown";
 import { H1, H2, H3, H4, P1, UL, OL, LI, A } from "~/components/system/components/Typography";
+import { useCache, useIsomorphicLayoutEffect } from "~/common/hooks";
 
 const STYLES_ASSET = (theme) => css`
   padding: 120px calc(32px + 16px + 8px);
@@ -133,12 +134,18 @@ const STYLES_INTENT = (theme) => css`
   );
 `;
 
-export default function MarkdownFrame({ url, date }) {
-  const [content, setContent] = React.useState("");
+export default function MarkdownFrame({ cid, url, date }) {
+  const [cache, setCache] = useCache();
+  const cachedContent = cache[cid] || "";
+
+  const [content, setContent] = React.useState(cachedContent);
+
+  useIsomorphicLayoutEffect(() => {
+    if (cachedContent) return;
 
-  React.useEffect(() => {
     fetch(url).then(async (res) => {
       const content = await res.text();
+      setCache(content);
       setContent(content);
     });
   }, []);

components/core/ObjectPreview/TextObjectPreview.js

@@ -5,7 +5,7 @@ import * as Styles from "~/common/styles";
 import * as Utilities from "~/common/utilities";
 
 import { P3 } from "~/components/system";
-import { useIsomorphicLayoutEffect } from "~/common/hooks";
+import { useCache, useIsomorphicLayoutEffect } from "~/common/hooks";
 import { css } from "@emotion/react";
 
 import FilePlaceholder from "~/components/core/ObjectPreview/placeholders/File";
@@ -29,12 +29,21 @@ const STYLES_TEXT_PREVIEW = (theme) =>
   });
 
 export default function TextObjectPreview({ url, file, ...props }) {
-  const [{ content, error }, setState] = React.useState({ content: "", error: undefined });
+  const [cache, setCache] = useCache();
+  const cachedContent = cache[file.cid] || "";
+
+  const [{ content, error }, setState] = React.useState({
+    content: cachedContent,
+    error: undefined,
+  });
 
   useIsomorphicLayoutEffect(() => {
+    if (cachedContent) return;
+
     fetch(url)
       .then(async (res) => {
         const content = await res.text();
+        setCache({ key: file.cid, value: content });
         setState({ content });
       })
       .catch((e) => {

components/core/SlateMediaObject.js

@@ -198,7 +198,7 @@ export default class SlateMediaObject extends React.Component {
     }
 
     if (Validations.isMarkdown(file.filename, type)) {
-      return <MarkdownFrame date={file.createdAt} url={url} />;
+      return <MarkdownFrame date={file.createdAt} cid={file?.cid} url={url} />;
     }
 
     if (Validations.isPreviewableImage(type)) {