fix: nsfw blur sometimes not applied for crossposts in remote communities

src/features/media/InlineMedia.tsx

@@ -2,7 +2,6 @@ import { CSSProperties } from "react";
 
 import Media, { MediaProps } from "#/features/media/Media";
 import { cx } from "#/helpers/css";
-import useLatch from "#/helpers/useLatch";
 import { useAppDispatch } from "#/store";
 
 import { IMAGE_FAILED, imageFailed, imageLoaded } from "./imageSlice";
@@ -28,15 +27,7 @@ export default function InlineMedia({
   ...props
 }: InlineMediaProps) {
   const dispatch = useAppDispatch();
-  const [mediaRef, currentAspectRatio] = useMediaLoadObserver(src);
-
-  /**
-   * Cross posts have different image thumbnail url when loaded, so prevent resizing by latching
-   *
-   * If the new image is different size (or errors), it will be properly updated then
-   * (IMAGE_FAILED is truthy)
-   */
-  const aspectRatio = useLatch(currentAspectRatio);
+  const [mediaRef, aspectRatio] = useMediaLoadObserver(src);
 
   function buildPlaceholderState() {
     if (aspectRatio === IMAGE_FAILED) return "error";

src/features/post/crosspost/Crosspost.tsx

@@ -1,16 +1,13 @@
-import { IonIcon, IonSkeletonText } from "@ionic/react";
-import { arrowUpSharp, chatbubbleOutline, repeat } from "ionicons/icons";
 import { PostView } from "lemmy-js-client";
 
-import LargePostContents from "#/features/post/inFeed/large/LargePostContents";
 import { cx } from "#/helpers/css";
-import { formatNumber } from "#/helpers/number";
 
 import CrosspostContainer from "./CrosspostContainer";
+import CrosspostContents from "./CrosspostContents";
 
-import styles from "./Crosspost.module.css";
+import styles from "./CrosspostContents.module.css";
 
-interface CrosspostProps {
+export interface CrosspostProps {
   post: PostView;
   url: string;
   className?: string;
@@ -24,50 +21,11 @@ export default function Crosspost(props: CrosspostProps) {
       className={cx(styles.container, props.className)}
     >
       {({ crosspost, hasBeenRead }) => (
-        <>
-          {crosspost ? (
-            <div
-              className={cx(
-                styles.title,
-                hasBeenRead ? styles.titleRead : undefined,
-              )}
-            >
-              {crosspost.post.name}
-            </div>
-          ) : (
-            <IonSkeletonText />
-          )}
-          <LargePostContents post={crosspost ?? props.post} />
-          <div
-            className={cx(
-              styles.bottom,
-              hasBeenRead ? styles.bottomRead : undefined,
-            )}
-          >
-            <IonIcon className={styles.crosspostIcon} icon={repeat} />
-            {crosspost ? (
-              crosspost.community.title
-            ) : (
-              <IonSkeletonText className={styles.communityIonSkeletonText} />
-            )}
-            <div className={styles.stat}>
-              <IonIcon icon={arrowUpSharp} />{" "}
-              {crosspost ? (
-                formatNumber(crosspost.counts.score)
-              ) : (
-                <IonSkeletonText className={styles.statIonSkeletonText} />
-              )}
-            </div>
-            <div className={styles.stat}>
-              <IonIcon icon={chatbubbleOutline} />{" "}
-              {crosspost ? (
-                formatNumber(crosspost.counts.comments)
-              ) : (
-                <IonSkeletonText className={styles.statIonSkeletonText} />
-              )}
-            </div>
-          </div>
-        </>
+        <CrosspostContents
+          {...props}
+          crosspost={crosspost}
+          hasBeenRead={hasBeenRead}
+        />
       )}
     </CrosspostContainer>
   );

src/features/post/crosspost/CrosspostContents.tsx

@@ -0,0 +1,75 @@
+import { IonIcon } from "@ionic/react";
+import { IonSkeletonText } from "@ionic/react";
+import { repeat } from "ionicons/icons";
+import { arrowUpSharp } from "ionicons/icons";
+import { chatbubbleOutline } from "ionicons/icons";
+import { PostView } from "lemmy-js-client";
+
+import LargePostContents from "#/features/post/inFeed/large/LargePostContents";
+import { cx } from "#/helpers/css";
+import { formatNumber } from "#/helpers/number";
+
+import { CrosspostProps } from "./Crosspost";
+import { useCopyPostAspectRatioIfNeeded } from "./useCopyPostAspectRatioIfNeeded";
+
+import styles from "./CrosspostContents.module.css";
+
+interface CrosspostContentsProps extends CrosspostProps {
+  crosspost: PostView | undefined;
+  hasBeenRead: boolean;
+}
+
+export default function CrosspostContents({
+  crosspost,
+  hasBeenRead,
+  post,
+}: CrosspostContentsProps) {
+  useCopyPostAspectRatioIfNeeded(post, crosspost);
+
+  return (
+    <>
+      {crosspost ? (
+        <div
+          className={cx(
+            styles.title,
+            hasBeenRead ? styles.titleRead : undefined,
+          )}
+        >
+          {crosspost.post.name}
+        </div>
+      ) : (
+        <IonSkeletonText />
+      )}
+      <LargePostContents post={crosspost ?? post} />
+      <div
+        className={cx(
+          styles.bottom,
+          hasBeenRead ? styles.bottomRead : undefined,
+        )}
+      >
+        <IonIcon className={styles.crosspostIcon} icon={repeat} />
+        {crosspost ? (
+          crosspost.community.title
+        ) : (
+          <IonSkeletonText className={styles.communityIonSkeletonText} />
+        )}
+        <div className={styles.stat}>
+          <IonIcon icon={arrowUpSharp} />{" "}
+          {crosspost ? (
+            formatNumber(crosspost.counts.score)
+          ) : (
+            <IonSkeletonText className={styles.statIonSkeletonText} />
+          )}
+        </div>
+        <div className={styles.stat}>
+          <IonIcon icon={chatbubbleOutline} />{" "}
+          {crosspost ? (
+            formatNumber(crosspost.counts.comments)
+          ) : (
+            <IonSkeletonText className={styles.statIonSkeletonText} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/features/post/crosspost/useCopyPostAspectRatioIfNeeded.ts

@@ -0,0 +1,30 @@
+import { PostView } from "lemmy-js-client";
+import { useEffect } from "react";
+
+import { imageLoaded } from "#/features/media/imageSlice";
+import useAspectRatio from "#/features/media/useAspectRatio";
+import usePostSrc from "#/features/post/inFeed/usePostSrc";
+import { useAppDispatch } from "#/store";
+
+/**
+ * Workaround to immediately copy over the aspect ratio of the original image
+ * to avoid flickering when the new crosspost image src loads
+ */
+export function useCopyPostAspectRatioIfNeeded(
+  post: PostView | undefined,
+  crosspost: PostView | undefined,
+) {
+  const dispatch = useAppDispatch();
+  const postAspectRatio = useAspectRatio(usePostSrc(post));
+  const crosspostSrc = usePostSrc(crosspost);
+  const crosspostAspectRatio = useAspectRatio(crosspostSrc);
+
+  useEffect(() => {
+    if (!crosspostSrc) return;
+    if (postAspectRatio && !crosspostAspectRatio) {
+      dispatch(
+        imageLoaded({ src: crosspostSrc, aspectRatio: postAspectRatio }),
+      );
+    }
+  }, [crosspostSrc, postAspectRatio, crosspostAspectRatio, dispatch]);
+}

src/features/post/inFeed/usePostSrc.ts

@@ -6,7 +6,9 @@ import { findUrlMediaType } from "#/helpers/url";
 import useSupported from "#/helpers/useSupported";
 import { useAppSelector } from "#/store";
 
-export default function usePostSrc(post: PostView): string | undefined {
+export default function usePostSrc(
+  post: PostView | undefined,
+): string | undefined {
   const thumbnailIsFullsize = useSupported("Fullsize thumbnails");
 
   const src = getPostMedia(post, thumbnailIsFullsize);
@@ -22,9 +24,11 @@ export default function usePostSrc(post: PostView): string | undefined {
 }
 
 function getPostMedia(
-  post: PostView,
+  post: PostView | undefined,
   thumbnailIsFullsize: boolean,
 ): [string] | [string, string] | undefined {
+  if (!post) return;
+
   if (post.post.url) {
     const isUrlMedia = findUrlMediaType(
       post.post.url,