Wait for design thumbnail to load

After adding a design, wait for the design thumnail to load before
trying to interact with it.

ee/app/assets/javascripts/design_management/components/design_overlay.vue

@@ -54,7 +54,7 @@ export default {
     <button
       type="button"
       class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
-      data-qa-selector="design_image"
+      data-qa-selector="design_image_button"
       @click="clickedImage($event.offsetX, $event.offsetY)"
     ></button>
     <button

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -80,7 +80,12 @@ export default {
           <icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
       </div>
-      <img :src="image" :alt="filename" class="block ml-auto mr-auto mw-100 mh-100 design-img" />
+      <img
+        :src="image"
+        :alt="filename"
+        class="block ml-auto mr-auto mw-100 mh-100 design-img"
+        data-qa-selector="design_image"
+      />
     </div>
     <div class="card-footer d-flex w-100">
       <div class="d-flex flex-column str-truncated-100">

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -13,6 +13,7 @@ exports[`Design management list item component hides comment count 1`] = `
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -74,6 +75,7 @@ exports[`Design management list item component renders item with correct status
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -135,6 +137,7 @@ exports[`Design management list item component renders item with correct status
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -196,6 +199,7 @@ exports[`Design management list item component renders item with correct status
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -244,6 +248,7 @@ exports[`Design management list item component renders item with multiple commen
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -309,6 +314,7 @@ exports[`Design management list item component renders item with no status icon
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>
@@ -357,6 +363,7 @@ exports[`Design management list item component renders item with single comment
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
       src="http://via.placeholder.com/300"
     />
   </div>

qa/qa/ee/page/component/design_management.rb

@@ -21,17 +21,18 @@ module QA
               end
 
               view 'ee/app/assets/javascripts/design_management/components/design_overlay.vue' do
-                element :design_image
+                element :design_image_button
               end
 
               view 'ee/app/assets/javascripts/design_management/components/list/item.vue' do
                 element :design_file_name
+                element :design_image
               end
             end
           end
 
           def add_annotation(note)
-            click_element(:design_image)
+            click_element(:design_image_button)
             fill_element(:note_textarea, note)
             click_element(:save_comment_button)
 
@@ -52,8 +53,12 @@ module QA
 
             filename = ::File.basename(design_file_path)
 
-            found = wait(reload: false) do
-              has_element?(:design_file_name, text: filename)
+            found = wait(reload: false, interval: 1) do
+              image = find_element(:design_image)
+
+              has_element?(:design_file_name, text: filename) &&
+                image["complete"] &&
+                image["naturalWidth"].to_i > 0
             end
 
             raise ElementNotFound, %Q(Attempted to attach design "#{filename}" but it did not appear) unless found