From c6839d487f7491f3953eb45c897b50ab873af85b Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Thu, 16 Nov 2023 10:09:57 +0100
Subject: [PATCH] fix(FileIconShortcut): Manage not-found error

This change displays the fallback when the image is not found. This can happen because useFetchShorcut can return images from the registry
---
 .../web/modules/filelist/FileIconShortcut.jsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/drive/web/modules/filelist/FileIconShortcut.jsx b/src/drive/web/modules/filelist/FileIconShortcut.jsx
index 7076bcde8a..5a2afa63e4 100644
--- a/src/drive/web/modules/filelist/FileIconShortcut.jsx
+++ b/src/drive/web/modules/filelist/FileIconShortcut.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { useClient, useFetchShortcut } from 'cozy-client'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -8,14 +8,23 @@ import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
 const FileIconShortcut = ({ file, size = 32 }) => {
   const client = useClient()
   const { shortcutImg } = useFetchShortcut(client, file.id)
+  const [isBroken, setBroken] = useState(null)
+
   return (
     <>
-      <div style={{ display: shortcutImg ? 'block' : 'none' }}>
-        <img src={shortcutImg} width={size} height={size} />
+      <div style={{ display: shortcutImg && !isBroken ? 'block' : 'none' }}>
+        <img
+          src={shortcutImg}
+          width={size}
+          height={size}
+          onError={() => {
+            setBroken(true)
+          }}
+        />
       </div>
       <div
         style={{
-          display: !shortcutImg ? 'block' : 'none'
+          display: !shortcutImg || isBroken ? 'block' : 'none'
         }}
       >
         <Icon icon={GlobeIcon} size={size} color={palette.coolGrey} />