diff --git a/website/src/lib/components/file-list/metadata/MetadataDialog.svelte b/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
index b7219471e..e9b11ca5a 100644
--- a/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
+++ b/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
@@ -49,9 +49,12 @@
         <Button
             variant="outline"
             onclick={() => {
+                // closes the dialog now: `open` follows `editMetadata`, and the change of the file
+                // would open the dialog again before the effect below has reset it
+                editMetadata.current = false;
+                open = false;
                 // the metadata of the selected elements are changed
                 engine.metadata(name, description);
-                open = false;
             }}
         >
             <Save size="16" />
diff --git a/website/src/lib/components/file-list/style/StyleDialog.svelte b/website/src/lib/components/file-list/style/StyleDialog.svelte
index 262b0ed34..5f886ca92 100644
--- a/website/src/lib/components/file-list/style/StyleDialog.svelte
+++ b/website/src/lib/components/file-list/style/StyleDialog.svelte
@@ -70,6 +70,11 @@
     });
 
     function applyStyle() {
+        // closes the dialog now: `open` follows `editStyle`, and the style changes the file, which
+        // would open the dialog again before the effect below has reset it
+        editStyle.current = false;
+        open = false;
+
         engine.style({
             color: colorChanged ? color : undefined,
             opacity: opacityChanged ? opacity : undefined,
@@ -84,8 +89,6 @@
                 $defaultWidth = width;
             }
         }
-
-        open = false;
     }
 </script>