change thumb loading to OnScreen loading and refetching on error|timeout at events accordion

src/shared/components/accordion/EventPanel.tsx

@@ -1,11 +1,10 @@
 import { Button, Flex, Group, Text } from '@mantine/core';
 import { IconExternalLink } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { EventFrigate } from '../../../types/event';
 import { getDurationFromTimestamps, unixTimeToDate } from '../../utils/dateUtil';
-import BlobImage from '../images/BlobImage';
 import VideoPlayer from '../players/VideoPlayer';
-import { useTranslation } from 'react-i18next';
 
 interface EventPanelProps {
     event: EventFrigate

src/shared/components/accordion/EventsAccordionItem.tsx

@@ -12,6 +12,7 @@ import { routesPath } from '../../../router/routes.path';
 import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { useTranslation } from 'react-i18next';
 import BlobImage from '../images/BlobImage';
+import OnScreenImage from '../images/OnScreenImage';
 
 
 interface EventsAccordionItemProps {
@@ -80,7 +81,7 @@ const EventsAccordionItem = ({
             <Accordion.Control key={event.id + 'Control'}>
                 <Flex justify='space-between'>
                     {!hostName ? <></> :
-                        <BlobImage
+                        <OnScreenImage
                             maw={200}
                             mr='1rem'
                             fit="contain"

src/shared/components/images/BlobImage.tsx

@@ -1,29 +1,26 @@
 import { Image, ImageProps, Loader } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
-import { useIntersection } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import RetryError from '../RetryError';
 
-interface BlobImageProps extends ImageProps {
+export interface BlobImageProps extends ImageProps {
     src: string
+    refetchOnError?: boolean
 }
 
 const BlobImage = ({
     src,
+    refetchOnError,
     ...rest
 }: BlobImageProps) => {
     const [imageSrc, setImageSrc] = useState<string | null>(null);
 
-    const { ref, entry } = useIntersection({ threshold: 0.1, })
-    const isVisible = entry?.isIntersecting
-
     const { data: imageBlob, refetch, isPending, isError } = useQuery({
         queryKey: [src],
         queryFn: () => proxyApi.getImageFrigate(src),
-        staleTime: 60 * 1000,
+        staleTime: Infinity,
         gcTime: Infinity,
-        refetchInterval: isVisible ? 30 * 1000 : undefined,
     });
 
     useEffect(() => {
@@ -41,7 +38,11 @@ const BlobImage = ({
 
     if (isPending || !imageSrc) return <Loader />
 
-    if (isError) return <RetryError onRetry={refetch} />
+    if (isError && refetchOnError) {
+        refetch()
+    } else if (isError) {
+        return <RetryError onRetry={refetch} />
+    }
 
     return (
         <Image src={imageSrc} {...rest} />

src/shared/components/images/OnScreenImage.tsx

@@ -0,0 +1,26 @@
+import { useIntersection } from '@mantine/hooks';
+import { FC, useEffect, useState } from 'react';
+import BlobImage, { BlobImageProps } from './BlobImage';
+
+const OnScreenImage: FC<BlobImageProps> = ({
+    ...rest
+}) => {
+    const [renderImage, setRenderImage] = useState<boolean>(false)
+    const { ref, entry } = useIntersection({ threshold: 0.1, })
+
+    useEffect(() => {
+        if (entry?.isIntersecting)
+            setRenderImage(true)
+    }, [entry?.isIntersecting])
+
+    return (
+        <div ref={ref}>
+            {!renderImage ? null :
+                <BlobImage {...rest}/>
+            }
+
+        </div>
+    );
+};
+
+export default OnScreenImage;