From 43477cf67c937b841710bb3ec99595d9b5577e06 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 12 Mar 2026 15:46:25 +0100
Subject: [PATCH 1/5] fix: add back schema info

---
 .../components/ResourceExplorer/ResourceExplorerViewer.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 1e9692e84..22739574a 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -17,6 +17,12 @@
           />
         </div>
         <div class="text-gray-medium text-xs flex items-center gap-1">
+          <SchemaBadge :resource />
+          <RiSubtractLine
+            v-if="resource.schema"
+            aria-hidden="true"
+            class="size-3 fill-gray-medium"
+          />
           <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
           <RiSubtractLine
             aria-hidden="true"
@@ -313,6 +319,7 @@ import Tooltip from '../Tooltip.vue'
 import Preview from '../ResourceAccordion/Preview.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
+import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import { filesize, summarize } from '../../functions/helpers'
 import { getResourceFormatIcon } from '../../functions/resources'
 import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'

From bbae79337b72d2c07ff811053ab839b1cf22313a Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 12 Mar 2026 15:46:32 +0100
Subject: [PATCH 2/5] fix: load more

---
 .../ResourceExplorer/ResourceExplorer.vue     | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
index 65d9ea462..fc88532fe 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
@@ -159,6 +159,22 @@ watch(searchDebounced, () => {
   }
 })
 
+// Separate useFetch for loadMore, initialized at setup time with immediate: false
+// so that it doesn't fetch until execute() is called from the event handler.
+const loadMoreType = ref<ResourceType>('main')
+const loadMorePage = ref(1)
+const loadMoreParams = computed(() => ({
+  type: loadMoreType.value,
+  page_size: PAGE_SIZE,
+  page: loadMorePage.value,
+  q: searchDebounced.value || undefined,
+}))
+const { data: loadMoreData, execute: executeLoadMore } = await useFetch<PaginatedArray<Resource>>(url, {
+  params: loadMoreParams,
+  immediate: false,
+  watch: false,
+})
+
 const loadMore = async (type: ResourceType) => {
   const index = RESOURCE_TYPE.indexOf(type)
   if (index === -1) return
@@ -166,17 +182,12 @@ const loadMore = async (type: ResourceType) => {
   const extraRef = extraResourcesByType[index]!
   pageRef.value++
 
-  const { data } = await useFetch<PaginatedArray<Resource>>(url, {
-    params: {
-      type,
-      page_size: PAGE_SIZE,
-      page: pageRef.value,
-      q: searchDebounced.value || undefined,
-    },
-  })
+  loadMoreType.value = type
+  loadMorePage.value = pageRef.value
+  await executeLoadMore()
 
-  if (data.value) {
-    extraRef.value = [...extraRef.value, ...data.value.data]
+  if (loadMoreData.value) {
+    extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
   }
 }
 

From fad172e2d19a534a3a3c7bd24aae2c8f20ffb41f Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 12 Mar 2026 16:01:35 +0100
Subject: [PATCH 3/5] empty state and skeleton fix

---
 .../{_microscope.svg => microscope.svg}       |  0
 .../ResourceAccordion/PreviewLoader.vue       |  3 +--
 .../ResourceExplorerViewer.vue                | 19 ++++++++++++++++++-
 .../composables/useResourceCapabilities.ts    |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)
 rename datagouv-components/assets/illustrations/{_microscope.svg => microscope.svg} (100%)

diff --git a/datagouv-components/assets/illustrations/_microscope.svg b/datagouv-components/assets/illustrations/microscope.svg
similarity index 100%
rename from datagouv-components/assets/illustrations/_microscope.svg
rename to datagouv-components/assets/illustrations/microscope.svg
diff --git a/datagouv-components/src/components/ResourceAccordion/PreviewLoader.vue b/datagouv-components/src/components/ResourceAccordion/PreviewLoader.vue
index 499f48e1c..3a53b82ad 100644
--- a/datagouv-components/src/components/ResourceAccordion/PreviewLoader.vue
+++ b/datagouv-components/src/components/ResourceAccordion/PreviewLoader.vue
@@ -1,7 +1,6 @@
 <template>
   <ContentLoader
-    :width="1124"
-    :height="300"
+    viewBox="0 0 1124 300"
     :speed="2"
     primary-color="#f3f3f3"
     secondary-color="#ecebeb"
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 22739574a..00e38fc52 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -139,9 +139,25 @@
                 :url="resource.extras['apidocUrl'] as string"
               />
               <Preview
-                v-else
+                v-else-if="hasTabularData"
                 :resource="resource"
               />
+              <div
+                v-else
+                class="flex flex-col items-center py-12"
+              >
+                <img
+                  :src="microscopeSrc"
+                  class="h-20 mb-3"
+                  alt=""
+                >
+                <p class="fr-text--bold mb-1">
+                  {{ t("Aucun aperçu disponible") }}
+                </p>
+                <p class="text-sm text-gray-medium mb-0">
+                  {{ t("Ce fichier ne peut pas être prévisualisé.") }}
+                </p>
+              </div>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -304,6 +320,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
diff --git a/datagouv-components/src/composables/useResourceCapabilities.ts b/datagouv-components/src/composables/useResourceCapabilities.ts
index c2670af32..052e62694 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -88,7 +88,7 @@ export function useResourceCapabilities(
     if (hasTabularData.value) {
       options.push({ key: 'data', label: t('Données') })
     }
-    else if (hasPreview.value || hasDatafairPreview.value || hasOpenAPIPreview.value) {
+    else {
       options.push({ key: 'data', label: t('Aperçu') })
     }
 

From d4b28bf367b05a9a68066bec37f56abbfa844022 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 12 Mar 2026 16:07:21 +0100
Subject: [PATCH 4/5] merge all error state with same design

---
 .../ResourceAccordion/Datafair.client.vue     | 14 ++----
 .../ResourceAccordion/JsonPreview.client.vue  | 43 ++++++-------------
 .../ResourceAccordion/MapContainer.client.vue | 15 ++-----
 .../ResourceAccordion/PdfPreview.client.vue   | 42 ++++++------------
 .../ResourceAccordion/Pmtiles.client.vue      | 15 +++----
 .../components/ResourceAccordion/Preview.vue  | 15 +++----
 .../ResourceAccordion/PreviewUnavailable.vue  | 22 ++++++++++
 .../ResourceAccordion/XmlPreview.client.vue   | 43 ++++++-------------
 .../ResourceExplorerViewer.vue                | 21 ++-------
 9 files changed, 83 insertions(+), 147 deletions(-)
 create mode 100644 datagouv-components/src/components/ResourceAccordion/PreviewUnavailable.vue

diff --git a/datagouv-components/src/components/ResourceAccordion/Datafair.client.vue b/datagouv-components/src/components/ResourceAccordion/Datafair.client.vue
index 7da6f78c6..409be4c71 100644
--- a/datagouv-components/src/components/ResourceAccordion/Datafair.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Datafair.client.vue
@@ -9,21 +9,15 @@
           border: none;"
       />
     </div>
-    <SimpleBanner
-      v-else
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else>
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import { useTranslation } from '../../composables/useTranslation'
diff --git a/datagouv-components/src/components/ResourceAccordion/JsonPreview.client.vue b/datagouv-components/src/components/ResourceAccordion/JsonPreview.client.vue
index 58308120a..cc3b49ed6 100644
--- a/datagouv-components/src/components/ResourceAccordion/JsonPreview.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/JsonPreview.client.vue
@@ -17,42 +17,25 @@
     >
       {{ t("Chargement de l'aperçu JSON...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else-if="fileTooLarge">
+      {{ fileSizeBytes
+        ? t("Le fichier JSON est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import { getResourceFilesize } from '../../functions/datasets'
diff --git a/datagouv-components/src/components/ResourceAccordion/MapContainer.client.vue b/datagouv-components/src/components/ResourceAccordion/MapContainer.client.vue
index 0dea5ab8b..55e833d8e 100644
--- a/datagouv-components/src/components/ResourceAccordion/MapContainer.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/MapContainer.client.vue
@@ -1,12 +1,7 @@
 <template>
-  <SimpleBanner
-    v-if="hasError"
-    type="warning"
-    class="flex items-center space-x-2"
-  >
-    <RiErrorWarningLine class="shrink-0 size-6" />
-    <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-  </SimpleBanner>
+  <PreviewUnavailable v-if="hasError">
+    {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+  </PreviewUnavailable>
   <div
     v-else
     id="map"
@@ -16,9 +11,7 @@
 
 <script setup lang = "ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
diff --git a/datagouv-components/src/components/ResourceAccordion/PdfPreview.client.vue b/datagouv-components/src/components/ResourceAccordion/PdfPreview.client.vue
index 2f76656bd..6f1fa976c 100644
--- a/datagouv-components/src/components/ResourceAccordion/PdfPreview.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/PdfPreview.client.vue
@@ -18,43 +18,27 @@
     >
       {{ t("Chargement de l'aperçu PDF...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier PDF trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Ce fichier PDF ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else-if="fileTooLarge">
+      {{ fileSizeBytes
+        ? t("Le fichier PDF est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
 import * as pdfjsLib from 'pdfjs-dist'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
 import type { PDFDocumentProxy } from 'pdfjs-dist'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
diff --git a/datagouv-components/src/components/ResourceAccordion/Pmtiles.client.vue b/datagouv-components/src/components/ResourceAccordion/Pmtiles.client.vue
index f2c492a20..e4a145209 100644
--- a/datagouv-components/src/components/ResourceAccordion/Pmtiles.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Pmtiles.client.vue
@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+    </PreviewUnavailable>
     <div
       v-else
       class="-mx-4"
@@ -53,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
 import maplibregl from 'maplibre-gl'
 import DOMPurify from 'dompurify'
@@ -64,7 +59,7 @@ import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import { getOwnerName, getOwnerPage } from '../../functions/owned'
diff --git a/datagouv-components/src/components/ResourceAccordion/Preview.vue b/datagouv-components/src/components/ResourceAccordion/Preview.vue
index 3a7ce4646..71505774e 100644
--- a/datagouv-components/src/components/ResourceAccordion/Preview.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Preview.vue
@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewLoader v-else-if="loading" />
     <div
       v-else
@@ -105,7 +100,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
 import { useFormatDate } from '../../functions/dates'
@@ -113,7 +108,7 @@ import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'
diff --git a/datagouv-components/src/components/ResourceAccordion/PreviewUnavailable.vue b/datagouv-components/src/components/ResourceAccordion/PreviewUnavailable.vue
new file mode 100644
index 000000000..29d0dea1c
--- /dev/null
+++ b/datagouv-components/src/components/ResourceAccordion/PreviewUnavailable.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col items-center py-12">
+    <img
+      :src="microscopeSrc"
+      class="h-20 mb-3"
+      alt=""
+    >
+    <p class="fr-text--bold mb-1">
+      {{ t("Aucun aperçu disponible") }}
+    </p>
+    <p class="text-sm text-gray-medium mb-0 text-center max-w-lg">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+
+const { t } = useTranslation()
+</script>
diff --git a/datagouv-components/src/components/ResourceAccordion/XmlPreview.client.vue b/datagouv-components/src/components/ResourceAccordion/XmlPreview.client.vue
index 5c011e2bb..673dc7457 100644
--- a/datagouv-components/src/components/ResourceAccordion/XmlPreview.client.vue
+++ b/datagouv-components/src/components/ResourceAccordion/XmlPreview.client.vue
@@ -9,42 +9,25 @@
     >
       {{ t("Chargement de l'aperçu XML...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else-if="fileTooLarge">
+      {{ fileSizeBytes
+        ? t("Le fichier XML est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d'
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 00e38fc52..cc7f72d24 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -142,22 +142,9 @@
                 v-else-if="hasTabularData"
                 :resource="resource"
               />
-              <div
-                v-else
-                class="flex flex-col items-center py-12"
-              >
-                <img
-                  :src="microscopeSrc"
-                  class="h-20 mb-3"
-                  alt=""
-                >
-                <p class="fr-text--bold mb-1">
-                  {{ t("Aucun aperçu disponible") }}
-                </p>
-                <p class="text-sm text-gray-medium mb-0">
-                  {{ t("Ce fichier ne peut pas être prévisualisé.") }}
-                </p>
-              </div>
+              <PreviewUnavailable v-else>
+                {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+              </PreviewUnavailable>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -320,7 +307,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
-import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'

From 963c5eee8a867bbd9bad4344158f884257a9fde3 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 12 Mar 2026 16:24:01 +0100
Subject: [PATCH 5/5] try to fix tsets

---
 tests/datasets/creation.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/datasets/creation.spec.ts b/tests/datasets/creation.spec.ts
index 2c87c172f..d6773c8e3 100644
--- a/tests/datasets/creation.spec.ts
+++ b/tests/datasets/creation.spec.ts
@@ -98,5 +98,5 @@ The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for t
   await expect(page.locator('dl')).toContainText('Other (Public Domain)')
   await expect(page.locator('dl')).toContainText('Formats de fichiers non standards')
   await page.getByTestId('expand-button').click()
-  await expect(page.getByLabel('Aperçu').locator('span')).toContainText('L\'aperçu n\'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l\'onglet Téléchargements.')
+  await expect(page.getByLabel('Aperçu')).toContainText('La taille du fichier est inconnue, l\'aperçu n\'est pas disponible. Téléchargez-le depuis l\'onglet Téléchargements.')
 })