diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
index 8e8d9e8a75..a6ab078504 100644
--- a/web_src/css/modules/dimmer.css
+++ b/web_src/css/modules/dimmer.css
@@ -2,6 +2,7 @@
 
 .ui.dimmer {
   position: fixed;
+  display: none;
   top: 0;
   left: 0;
   right: 0;
@@ -12,6 +13,8 @@
   overflow-y: auto;
   justify-content: center;
   padding: 8px 0;
+  transition: opacity 1s ease;
+  user-select: none;
 }
 
 .ui.active.dimmer {
@@ -21,5 +24,5 @@
 
 .ui.dimmer > * {
   position: static;
-  margin: auto !important;
+  margin: auto 0 !important;
 }
diff --git a/web_src/js/modules/fomantic/dimmer.js b/web_src/js/modules/fomantic/dimmer.js
index 6ef731286e..f434e1ca59 100644
--- a/web_src/js/modules/fomantic/dimmer.js
+++ b/web_src/js/modules/fomantic/dimmer.js
@@ -1,24 +1,27 @@
 import $ from 'jquery';
-import {showElem, hideElem, queryElemChildren} from '../../utils/dom.js';
+import {queryElemChildren} from '../../utils/dom.js';
 
 export function initFomanticDimmer() {
   // stand-in for removed dimmer module
   $.fn.dimmer = function (arg0, $el) {
     if (arg0 === 'add content') {
-      this._dimmer = document.createElement('div');
-      queryElemChildren(document.body, '.ui.dimmer', (el) => el.remove());
-      this._dimmer.classList.add('ui', 'dimmer', 'tw-hidden');
+      const existingDimmer = document.querySelector('body > .ui.dimmer');
+      if (existingDimmer) {
+        queryElemChildren(existingDimmer, '*', (el) => el.remove());
+        this._dimmer = existingDimmer;
+      } else {
+        this._dimmer = document.createElement('div');
+        this._dimmer.classList.add('ui', 'dimmer');
+        document.body.append(this._dimmer);
+      }
       this._dimmer.append($el[0]);
-      document.body.append(this._dimmer);
     } else if (arg0 === 'get dimmer') {
       return $(this._dimmer);
     } else if (arg0 === 'show') {
       this._dimmer.classList.add('active');
-      showElem(this._dimmer);
       document.body.classList.add('tw-overflow-hidden');
     } else if (arg0 === 'hide') {
       this._dimmer.classList.remove('active');
-      hideElem(this._dimmer);
       document.body.classList.remove('tw-overflow-hidden');
     }
     return this;