Fix link preview image flickering indefinitely.

This commit is contained in:
Bojan Mojsilovic 2024-04-03 17:50:29 +02:00
parent e6104ff4ad
commit 948a1d7cba

View File

@ -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]}