diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 49485067037..9c3187d01bc 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -339,3 +339,41 @@
         margin-bottom: 5px;
     }
 }
+
+// No content helper
+@mixin o-nocontent-empty {
+    pointer-events: auto;
+    max-width: 650px;
+    margin: auto;
+    padding: 15px;
+    z-index: 1000;
+    text-align: center;
+    color: $o-tooltip-text-color;
+    font-size: 115%;
+
+    > p:first-of-type {
+        margin-top: 0;
+        color: $o-tooltip-title-text-color;
+        font-weight: bold;
+        font-size: 125%;
+    }
+
+    a {
+        cursor: pointer;
+    }
+}
+
+%o-nocontent-init-image {
+    content: "";
+    display: block;
+    margin: auto;
+    background-size: cover;
+}
+
+%o-nocontent-empty-document {
+    @extend %o-nocontent-init-image;
+    @include size(120px, 80px);
+    margin-top: 30px;
+    margin-bottom: 30px;
+    background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
+}
diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss
index e4e86231940..d917b3fd1d6 100644
--- a/addons/web/static/src/scss/views.scss
+++ b/addons/web/static/src/scss/views.scss
@@ -45,51 +45,22 @@
     z-index: 1;
 
     .o_nocontent_help {
-        pointer-events: auto;
-        max-width: 650px;
-        margin: auto;
-        padding: 15px;
-        z-index: 1000;
-        text-align: center;
-        color: $o-tooltip-text-color;
-        font-size: 115%;
-
-        > p:first-of-type {
-            margin-top: 0;
-            color: $o-tooltip-title-text-color;
-            font-weight: bold;
-            font-size: 125%;
-        }
-
-        a {
-            cursor: pointer;
-        }
-
-        @mixin o-init-image {
-            content: "";
-            display: block;
-            margin: auto;
-            background-size: cover;
-        }
+        @include o-nocontent-empty;
 
         .o_view_nocontent_smiling_face:before {
-            @include o-init-image;
+            @extend %o-nocontent-init-image;
             @include size(120px, 140px);
             background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_neutral_face:before {
-            @include o-init-image;
+            @extend %o-nocontent-init-image;
             @include size(120px, 140px);
             background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_empty_folder:before {
-            @include o-init-image;
-            @include size(120px, 80px);
-            margin-top: 30px;
-            margin-bottom: 30px;
-            background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
+            @extend %o-nocontent-empty-document;
         }
 
         .o_empty_custom_dashboard {
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index e116ab77e49..22c30d501d1 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -429,9 +429,10 @@ var FileWidget = SearchableMediaWidget.extend({
         this._highlightSelected();
 
         // adapt load more
+        var noLoadMoreButton = this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY >= this.attachments.length;
         var noMoreImgToLoad = this.numberOfAttachmentsToDisplay >= this.attachments.length;
+        this.$('.o_load_done_msg').toggleClass('d-none', noLoadMoreButton || !noMoreImgToLoad);
         this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad);
-        this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad);
     },
     /**
      * @private
@@ -683,7 +684,11 @@ var FileWidget = SearchableMediaWidget.extend({
                 }).then(function (prevented) {
                     if (_.isEmpty(prevented)) {
                         self.attachments = _.without(self.attachments, attachment);
-                        $a.closest('.o_existing_attachment_cell').remove();
+                        if (!self.attachments.length) {
+                            self._renderImages(); //render the message and image if empty
+                        } else {
+                            $a.closest('.o_existing_attachment_cell').remove();
+                        }
                         return;
                     }
                     self.$errorText.replaceWith(QWeb.render('wysiwyg.widgets.image.existing.error', {
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index bb5d5088716..846252abc8d 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -378,3 +378,11 @@ a.o_underline {
         }
     }
 }
+
+.o_nocontent_help {
+    @include o-nocontent-empty;
+
+    .o_empty_folder_image:before {
+        @extend %o-nocontent-empty-document;
+    }
+}
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index baff05e2356..f358f4ad178 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -100,7 +100,7 @@
             <div class="form-text o_we_error_text"/>
             <div class="o_we_existing_attachments"/>
             <div class="mt-4 text-center mx-auto">
-                <button class="btn btn-primary o_load_more" type="button">Load more...</button>
+                <button class="btn btn-primary o_load_more d-none" type="button">Load more...</button>
                 <div class="mt-4 o_load_done_msg d-none">
                     <span><i>All images have been loaded</i></span>
                 </div>
@@ -224,7 +224,11 @@
 
     <t t-name="wysiwyg.widgets.image.existing.attachments">
         <div class="o_we_existing_attachments o_we_images">
-            <ol class="d-flex flex-wrap mx-auto my-0 p-2">
+            <div t-if="!attachments.length" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No images found.</p>
+                <p class="o_empty_folder_subtitle">You can upload images with the button located in the top left of the screen.</p>
+            </div>
+            <ol t-else="" class="d-flex flex-wrap mx-auto my-0 p-2">
                 <t t-foreach="attachments" t-as="attachment">
                     <t t-call="wysiwyg.widgets.image.existing.attachment"/>
                 </t>
@@ -244,7 +248,11 @@
 
     <t t-name="wysiwyg.widgets.document.existing.attachments">
         <div class="o_we_existing_attachments o_we_documents">
-            <div class="row mx-auto">
+            <div t-if="!attachments.length" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No documents found.</p>
+                <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
+            </div>
+            <div t-else="" class="row mx-auto">
                 <t t-foreach="attachments" t-as="attachment">
                     <div class="col-2 o_existing_attachment_cell o_we_attachment_highlight my-2" t-att-data-id="attachment.id">
                         <t t-call="wysiwyg.widgets.file.existing.remove"/>