From 948a1d7cbad7b4822d452a63f206a6359eb9af9a Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 3 Apr 2024 17:50:29 +0200
Subject: [PATCH] Fix link preview image flickering indefinitely.

---
 src/components/LinkPreview/LinkPreview.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/LinkPreview/LinkPreview.tsx b/src/components/LinkPreview/LinkPreview.tsx
index 98b8309..6963de4 100644
--- a/src/components/LinkPreview/LinkPreview.tsx
+++ b/src/components/LinkPreview/LinkPreview.tsx
@@ -1,9 +1,11 @@
-import { Component, createMemo, Show } from 'solid-js';
+import { Component, createMemo, createSignal, Show } from 'solid-js';
 import { useMediaContext } from '../../contexts/MediaContext';
 import { hookForDev } from '../../lib/devTools';
 
 import styles from './LinkPreview.module.scss';
 
+const errorCountLimit = 3;
+
 const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, isLast?: boolean }> = (props) => {
 
   const media = useMediaContext();
@@ -49,7 +51,11 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, is
     return k;
   };
 
+  const [errorCount, setErrorCount] = createSignal(0);
+
   const onError = (event: any) => {
+    if (errorCount() > errorCountLimit) return;
+    setErrorCount(v => v + 1);
     const image = event.target;
     image.onerror = '';
     image.src = props.preview.images[0];
@@ -63,7 +69,7 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, is
       class={klass()}
       target="_blank"
     >
-      <Show when={image() || props.preview.images[0]}>
+      <Show when={errorCount() < errorCountLimit && (image() || props.preview.images[0])}>
         <img
           class={styles.previewImage}
           src={image()?.media_url || props.preview.images[0]}