- {
- setTextExchangeOpen(false);
- setEditing(true);
- }}
- textExchangeOpen={textExchangeOpen}
- />
+ {LAZY_MODULE_TYPES.has(module.type) ? (
+ }>
+
+
+ ) : (
+
+ )}
);
}
+function ModuleLoadingFallback({ label }) {
+ return Chargement de {label}...
;
+}
+
function EditableModuleTitle({ value, fallback, onSave, tutorialTarget = "" }) {
const inlineEdit = useInlineEdit({
value,
diff --git a/website/src/features/toolboxes/useToolboxActions.js b/website/src/features/toolboxes/useToolboxActions.js
index f360f04..23fa887 100644
--- a/website/src/features/toolboxes/useToolboxActions.js
+++ b/website/src/features/toolboxes/useToolboxActions.js
@@ -87,13 +87,17 @@ export function useToolboxActions({ store, notify, creationTemplate, setConfirmM
const imageFiles = [...files].filter((file) => file?.type?.startsWith("image/"));
if (!imageFiles.length) return false;
const data = store.getModuleData(toolboxId, moduleId, { images: [] });
+ const images = [];
for (const file of imageFiles) {
const image = { id: uid("image"), dataUrl: await compressImage(file) };
const label = labelFromFileName(file.name);
if (label) image.label = label;
- data.images.unshift(image);
+ images.unshift(image);
}
- return store.updateModuleData(toolboxId, moduleId, data);
+ return store.updateModuleData(toolboxId, moduleId, {
+ ...data,
+ images: [...images, ...(Array.isArray(data.images) ? data.images : [])]
+ });
}
function createChecklistFromList(gameId, list) {
diff --git a/website/src/styles/toolboxes/_module-shell.scss b/website/src/styles/toolboxes/_module-shell.scss
index c34b484..bdb219c 100644
--- a/website/src/styles/toolboxes/_module-shell.scss
+++ b/website/src/styles/toolboxes/_module-shell.scss
@@ -25,6 +25,15 @@
min-width: 0;
}
+.module-loading-fallback {
+ padding: var(--space-4);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ background: rgba(7, 10, 24, 0.32);
+ color: var(--color-text-secondary);
+ font-size: 14px;
+}
+
.module-content.is-scrollable {
max-height: 450px;
overflow-y: auto;