From e85920ec3b14d04eb422cb22ddd770f3295d27e8 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Fri, 26 Apr 2024 13:20:26 +0100
Subject: [PATCH] Only show placeholder image if offline

This means we won't show it when initially loading the app
---
 src/documentation/common/DocumentationContent.tsx | 1 +
 src/documentation/ideas/IdeaCard.tsx              | 1 +
 src/documentation/ideas/IdeasDocumentation.tsx    | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/documentation/common/DocumentationContent.tsx b/src/documentation/common/DocumentationContent.tsx
index 27646850e..768076686 100644
--- a/src/documentation/common/DocumentationContent.tsx
+++ b/src/documentation/common/DocumentationContent.tsx
@@ -219,6 +219,7 @@ const serializers = {
             .width(300)
             .fit("max")
             .url()}
+          ignoreFallback={navigator.onLine}
           fallback={<OfflineImageFallback {...imageProps} />}
           alt={props.node.alt}
           {...imageProps}
diff --git a/src/documentation/ideas/IdeaCard.tsx b/src/documentation/ideas/IdeaCard.tsx
index e61b134b8..2e0ed4620 100644
--- a/src/documentation/ideas/IdeaCard.tsx
+++ b/src/documentation/ideas/IdeaCard.tsx
@@ -41,6 +41,7 @@ const IdeaCard = ({ name, image, isV2Only, onClick }: IdeaCardProps) => {
     >
       <Image
         src={imageUrlBuilder.image(image.asset).width(550).url()}
+        ignoreFallback={navigator.onLine}
         fallback={<OfflineImageFallback useIcon {...imageProps} />}
         alt=""
         {...imageProps}
diff --git a/src/documentation/ideas/IdeasDocumentation.tsx b/src/documentation/ideas/IdeasDocumentation.tsx
index 5cbd1e885..9288a9559 100644
--- a/src/documentation/ideas/IdeasDocumentation.tsx
+++ b/src/documentation/ideas/IdeasDocumentation.tsx
@@ -109,6 +109,7 @@ const ActiveLevel = ({
                   .image(activeIdea.image.asset)
                   .fit("max")
                   .url()}
+                ignoreFallback={navigator.onLine}
                 fallback={<OfflineImageFallback {...imageProps} />}
                 alt=""
                 {...imageProps}