Simplify jira issues root logic

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

@@ -274,9 +274,10 @@ export default {
           <gl-skeleton-loading />
         </li>
       </ul>
+      <template v-else>
         <component
           :is="issuablesWrapper"
-        v-if="!issuablesLoading && issuables.length"
+          v-if="issuables.length > 0"
           class="content-list issuable-list issues-list"
           :class="{ 'manual-ordering': isManualOrdering }"
           v-bind="$options.vueDraggableAttributes"
@@ -311,7 +312,9 @@ export default {
             </template>
           </issuable-item>
         </component>
-      <slot v-if="!issuablesLoading && !issuables.length" name="empty-state"></slot>
+        <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"',