1 files changed, 11 insertions, 3 deletions
diff --git a/app/assets/javascripts/visual_review_toolbar/components/note.js b/app/assets/javascripts/visual_review_toolbar/components/note.js
index dfebf58fd95..0150f640aae 100644
--- a/app/assets/javascripts/visual_review_toolbar/components/note.js
+++ b/app/assets/javascripts/visual_review_toolbar/components/note.js
@@ -1,14 +1,19 @@
-import { NOTE, RED } from './constants';
-import { selectById, selectNote } from './utils';
+import { NOTE, NOTE_CONTAINER, RED } from './constants';
+import { selectById, selectNote, selectNoteContainer } from './utils';
 
 const note = `
-  <p id=${NOTE} class='gitlab-message'></p>
+  <div id="${NOTE_CONTAINER}" style="visibility: hidden;">
+    <p id="${NOTE}" class="gitlab-message"></p>
+  </div>
 `;
 
 const clearNote = inputId => {
   const currentNote = selectNote();
+  const noteContainer = selectNoteContainer();
+
   currentNote.innerText = '';
   currentNote.style.color = '';
+  noteContainer.style.visibility = 'hidden';
 
   if (inputId) {
     const field = document.getElementById(inputId);
@@ -18,10 +23,13 @@ const clearNote = inputId => {
 
 const postError = (message, inputId) => {
   const currentNote = selectNote();
+  const noteContainer = selectNoteContainer();
   const field = selectById(inputId);
   field.style.borderColor = RED;
   currentNote.style.color = RED;
   currentNote.innerText = message;
+  noteContainer.style.visibility = 'visible';
+  setTimeout(clearNote.bind(null, inputId), 5000);
 };
 
 export { clearNote, note, postError };