diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 2922d88e7a..26f1dc86c6 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -8,6 +8,7 @@
import Link from "../../Link/Link.svelte"
import Tag from "../../Tags/Tag.svelte"
import Tags from "../../Tags/Tags.svelte"
+ import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
const BYTES_IN_KB = 1000
const BYTES_IN_MB = 1000000
@@ -39,12 +40,14 @@
"jfif",
"webp",
]
-
const fieldId = id || uuid()
+
let selectedImageIdx = 0
let fileDragged = false
let selectedUrl
let fileInput
+ let loading = false
+
$: selectedImage = value?.[selectedImageIdx] ?? null
$: fileCount = value?.length ?? 0
$: isImage =
@@ -86,10 +89,15 @@
}
if (processFiles) {
- const processedFiles = await processFiles(fileList)
- const newValue = [...value, ...processedFiles]
- dispatch("change", newValue)
- selectedImageIdx = newValue.length - 1
+ loading = true
+ try {
+ const processedFiles = await processFiles(fileList)
+ const newValue = [...value, ...processedFiles]
+ dispatch("change", newValue)
+ selectedImageIdx = newValue.length - 1
+ } finally {
+ loading = false
+ }
} else {
dispatch("change", fileList)
}
@@ -227,7 +235,7 @@
{#if showDropzone}
+
+ {#if loading}
+
+ {/if}
{/if}
@@ -464,6 +478,7 @@
.spectrum-Dropzone {
height: 220px;
+ position: relative;
}
.compact .spectrum-Dropzone {
height: 40px;
@@ -488,4 +503,14 @@
.tag {
margin-top: 8px;
}
+
+ .loading {
+ position: absolute;
+ display: grid;
+ place-items: center;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ }
diff --git a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
index 261954379b..215fdabd8d 100644
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@@ -53,6 +53,7 @@
on:close={close}
maxHeight={null}
resizable
+ minWidth={360}
>
@@ -80,7 +81,6 @@
}
.content {
- width: 300px;
padding: 20px;
display: flex;
flex-direction: column;
diff --git a/packages/frontend-core/src/fetch/NestedProviderFetch.js b/packages/frontend-core/src/fetch/NestedProviderFetch.js
index 01c22b6ba0..0a08b00cb4 100644
--- a/packages/frontend-core/src/fetch/NestedProviderFetch.js
+++ b/packages/frontend-core/src/fetch/NestedProviderFetch.js
@@ -5,6 +5,7 @@ export default class NestedProviderFetch extends DataFetch {
// Nested providers should already have exposed their own schema
return {
schema: datasource?.value?.schema,
+ primaryDisplay: datasource?.value?.primaryDisplay,
}
}