Simplify jira issues root logic

app/assets/javascripts/issuable_list/components/issuable_list_root.vue

@@ -274,44 +274,47 @@ export default {
           <gl-skeleton-loading />
         </li>
       </ul>
-      <component
-        :is="issuablesWrapper"
-        v-if="!issuablesLoading && issuables.length"
-        class="content-list issuable-list issues-list"
-        :class="{ 'manual-ordering': isManualOrdering }"
-        v-bind="$options.vueDraggableAttributes"
-        @update="handleVueDraggableUpdate"
-      >
-        <issuable-item
-          v-for="issuable in issuables"
-          :key="issuableId(issuable)"
-          :class="{ 'gl-cursor-grab': isManualOrdering }"
-          :issuable-symbol="issuableSymbol"
-          :issuable="issuable"
-          :enable-label-permalinks="enableLabelPermalinks"
-          :label-filter-param="labelFilterParam"
-          :show-checkbox="showBulkEditSidebar"
-          :checked="issuableChecked(issuable)"
-          @checked-input="handleIssuableCheckedInput(issuable, $event)"
+      <template v-else>
+        <component
+          :is="issuablesWrapper"
+          v-if="issuables.length > 0"
+          class="content-list issuable-list issues-list"
+          :class="{ 'manual-ordering': isManualOrdering }"
+          v-bind="$options.vueDraggableAttributes"
+          @update="handleVueDraggableUpdate"
         >
-          <template #reference>
-            <slot name="reference" :issuable="issuable"></slot>
-          </template>
-          <template #author>
-            <slot name="author" :author="issuable.author"></slot>
-          </template>
-          <template #timeframe>
-            <slot name="timeframe" :issuable="issuable"></slot>
-          </template>
-          <template #status>
-            <slot name="status" :issuable="issuable"></slot>
-          </template>
-          <template #statistics>
-            <slot name="statistics" :issuable="issuable"></slot>
-          </template>
-        </issuable-item>
-      </component>
-      <slot v-if="!issuablesLoading && !issuables.length" name="empty-state"></slot>
+          <issuable-item
+            v-for="issuable in issuables"
+            :key="issuableId(issuable)"
+            :class="{ 'gl-cursor-grab': isManualOrdering }"
+            :issuable-symbol="issuableSymbol"
+            :issuable="issuable"
+            :enable-label-permalinks="enableLabelPermalinks"
+            :label-filter-param="labelFilterParam"
+            :show-checkbox="showBulkEditSidebar"
+            :checked="issuableChecked(issuable)"
+            @checked-input="handleIssuableCheckedInput(issuable, $event)"
+          >
+            <template #reference>
+              <slot name="reference" :issuable="issuable"></slot>
+            </template>
+            <template #author>
+              <slot name="author" :author="issuable.author"></slot>
+            </template>
+            <template #timeframe>
+              <slot name="timeframe" :issuable="issuable"></slot>
+            </template>
+            <template #status>
+              <slot name="status" :issuable="issuable"></slot>
+            </template>
+            <template #statistics>
+              <slot name="statistics" :issuable="issuable"></slot>
+            </template>
+          </issuable-item>
+        </component>
+        <slot v-else name="empty-state"></slot>
+      </template>
+
       <gl-pagination
         v-if="showPaginationControls"
         :per-page="defaultPageSize"

ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue

@@ -51,7 +51,7 @@ export default {
     return {
       jiraLogo,
       issues: [],
-      issuesListLoading: false,
+      issuesListLoading: true,
       issuesListLoadFailed: false,
       totalIssues: 0,
       currentState: this.initialState,
@@ -206,19 +206,19 @@ export default {
     </template>
     <template #reference="{ issuable }">
       <span v-safe-html="jiraLogo" class="svg-container jira-logo-container"></span>
-      <span>{{ issuable.references.relative }}</span>
+      <span v-if="issuable">{{ issuable.references.relative }}</span>
     </template>
     <template #author="{ author }">
       <gl-sprintf message="%{authorName} in Jira">
         <template #authorName>
-          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl"
-            >{{ author.name }}
+          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl">
+            {{ author.name }}
           </gl-link>
         </template>
       </gl-sprintf>
     </template>
     <template #status="{ issuable }">
-      {{ issuable.status }}
+      <template v-if="issuable"> {{ issuable.status }} </template>
     </template>
     <template #empty-state>
       <jira-issues-list-empty-state

ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js

@@ -120,7 +120,7 @@ describe('JiraIssuesListRoot', () => {
     describe('when request fails', () => {
       it.each`
         APIErrorMessage | expectedRenderedErrorMessage
-        ${'API error'}  | ${'API error'}
+        ${'API error'}  | ${'An error occurred while loading issues'}
         ${undefined}    | ${'An error occurred while loading issues'}
       `(
         'calls `createFlash` with "$expectedRenderedErrorMessage" when API responds with "$APIErrorMessage"',