diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..f01e63570868492f5ac336a4fdefac045d897ad8
--- /dev/null
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -0,0 +1,22 @@
+#import "~/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql"
+
+query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
+  project(fullPath: $fullPath) {
+    id
+    fullPath
+    mergeRequest(iid: $mergeRequestIid) {
+      id
+      iid
+      title
+      webPath
+      pipelineCreationRequests {
+        status
+        pipelineId
+        error
+        pipeline {
+          ...PipelineDetails
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..8c00412f0781792611258ca1bcc04fb781fae9b0
--- /dev/null
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -0,0 +1,18 @@
+#import "~/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql"
+
+subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
+  ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
+    id
+    iid
+    title
+    webPath
+    pipelineCreationRequests {
+      status
+      pipelineId
+      error
+      pipeline {
+        ...PipelineDetails
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js b/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
index 074e5b497590004eb78a0b8ddf9869a4825375a3..ab812eb653f88d95780c93df6bedbd9ae00907db 100644
--- a/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
+++ b/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
@@ -201,9 +201,8 @@ export default {
         .then(() => {
           if (!options.isAsync) {
             this.$toast.show(TOAST_MESSAGE);
+            this.updateTable();
           }
-
-          this.updateTable();
         })
         .catch((e) => {
           const unauthorized = e.response.status === HTTP_STATUS_UNAUTHORIZED;
diff --git a/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql b/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..44bc86c32ee691ed98b410c9345468032f4e6a47
--- /dev/null
+++ b/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql
@@ -0,0 +1,72 @@
+#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+
+fragment PipelineDetails on Pipeline {
+  id
+  iid
+  detailedStatus {
+    ...CiIcon
+    name
+    label
+    hasDetails
+  }
+  createdAt
+  finishedAt
+  duration
+  name
+  ref
+  refPath
+  refText
+  commit {
+    id
+    name
+    sha
+    shortId
+    title
+    webUrl
+    author {
+      id
+      avatarUrl
+      webPath
+      name
+    }
+  }
+  user {
+    id
+    name
+    webPath
+    avatarUrl
+  }
+  source
+  latest
+  yamlErrors
+  failureReason
+  configSource
+  stuck
+  type
+  path
+  retryable
+  cancelable
+  stages {
+    nodes {
+      id
+      name
+      detailedStatus {
+        ...CiIcon
+        tooltip
+      }
+    }
+  }
+  mergeRequest {
+    id
+    iid
+    webPath
+    title
+  }
+  mergeRequestEventType
+  project {
+    id
+    fullPath
+  }
+  hasManualActions
+  hasScheduledActions
+}
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index a74d7f705fa25a3abcf7186a8b356232742b6ecd..9061c44edeafb08d184ec6f03236be28bf55591a 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -1,18 +1,38 @@
 <script>
-import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlEmptyState,
+  GlLoadingIcon,
+  GlModal,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import PipelinesTable from '~/ci/common/pipelines_table.vue';
 import { PIPELINE_ID_KEY } from '~/ci/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import eventHub from '~/ci/event_hub';
 import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
 import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
 import PipelineStore from '~/ci/pipeline_details/stores/pipelines_store';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
+import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
+import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
+import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_CI_PIPELINE } from '~/graphql_shared/constants';
+import { createAlert } from '~/alert';
+import retryPipelineMutation from '~/ci/pipelines_page/graphql/mutations/retry_pipeline.mutation.graphql';
+import cancelPipelineMutation from '~/ci/pipelines_page/graphql/mutations/cancel_pipeline.mutation.graphql';
+import { MR_PIPELINE_TYPE_DETACHED } from '~/ci/merge_requests/constants';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 
 export default {
   components: {
+    GlAlert,
     GlButton,
     GlEmptyState,
     GlLink,
@@ -22,7 +42,7 @@ export default {
     PipelinesTable,
     TablePagination,
   },
-  mixins: [PipelinesMixin],
+  mixins: [PipelinesMixin, glFeatureFlagsMixin()],
   props: {
     canCreatePipelineInTargetProject: {
       type: Boolean,
@@ -72,7 +92,64 @@ export default {
       default: 'root',
     },
   },
+  apollo: {
+    pipelineCreationRequests: {
+      query: getPipelineCreationRequests,
+      variables() {
+        return {
+          fullPath: this.targetProjectFullPath,
+          mergeRequestIid: String(this.mergeRequestId),
+        };
+      },
+      skip() {
+        return (
+          !this.isRealtimePipelineCreationRequestsEnabled ||
+          !this.isMergeRequestTable ||
+          !this.mergeRequestId ||
+          !this.targetProjectFullPath
+        );
+      },
+      update(data) {
+        if (data.project?.mergeRequest) {
+          const { pipelineCreationRequests, ...mergeRequest } = data.project.mergeRequest;
+          this.mergeRequest = mergeRequest;
 
+          return pipelineCreationRequests;
+        }
+        return [];
+      },
+      subscribeToMore: {
+        document: pipelineCreationRequestsUpdatedSubscription,
+        variables() {
+          return {
+            mergeRequestId: this.mergeRequest.id,
+          };
+        },
+        skip() {
+          return (
+            !this.isRealtimePipelineCreationRequestsEnabled ||
+            !this.isMergeRequestTable ||
+            !this.mergeRequest.id
+          );
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
+
+          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
+          return {
+            ...previousResult,
+            project: {
+              ...previousResult.project,
+              mergeRequest: {
+                ...previousResult.project.mergeRequest,
+                pipelineCreationRequests: updated.pipelineCreationRequests,
+              },
+            },
+          };
+        },
+      },
+    },
+  },
   data() {
     const store = new PipelineStore();
 
@@ -82,10 +159,18 @@ export default {
       page: getParameterByName('page') || '1',
       requestData: {},
       modalId: 'create-pipeline-for-fork-merge-request-modal',
+      pipelineCreationRequests: [],
+      showCreationFailedAlert: false,
+      isCreatingPipeline: false,
+      loaderTimeout: null,
+      mergeRequest: {},
     };
   },
 
   computed: {
+    isRealtimePipelineCreationRequestsEnabled() {
+      return this.glFeatures.ciPipelineCreationRequestsRealtime;
+    },
     shouldRenderTable() {
       return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
     },
@@ -129,17 +214,75 @@ export default {
      */
     latestPipelineDetachedFlag() {
       const latest = this.state.pipelines[0];
-      return (
-        latest &&
-        latest.flags &&
-        (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
-      );
+      if (latest) {
+        if (
+          latest.flags &&
+          (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
+        ) {
+          return true;
+        }
+        if (
+          latest.mergeRequestEventType &&
+          latest.mergeRequestEventType === MR_PIPELINE_TYPE_DETACHED
+        ) {
+          return true;
+        }
+      }
+      return false;
+    },
+    hasInProgressCreationRequests() {
+      return this.requestLengthByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
+    },
+    showRunPipelineButtonLoader() {
+      return this.isMergeRequestTable && this.isRealtimePipelineCreationRequestsEnabled
+        ? this.hasInProgressCreationRequests
+        : this.state.isRunningMergeRequestPipeline;
+    },
+    latestPipelineId() {
+      const latest = this.state.pipelines[0];
+      return latest ? latest.id : 0;
+    },
+  },
+  watch: {
+    pipelineCreationRequests: {
+      handler(newRequests, oldRequests) {
+        const hasInProgress = this.requestLengthByStatus(newRequests, 'IN_PROGRESS') > 0;
+
+        if (hasInProgress) {
+          this.startDebouncedPipelineLoader();
+        } else {
+          this.stopDebouncedPipelineLoader();
+        }
+
+        const hasSucceededRequests = this.hasSuccessCountIncreased(oldRequests, newRequests);
+        const hasFailedRequests = this.hasFailureCountIncreased(oldRequests, newRequests);
+
+        if (hasSucceededRequests) {
+          const createdPipelines = newRequests
+            .filter(
+              (req) =>
+                req.status === 'SUCCEEDED' &&
+                req.pipeline &&
+                this.latestPipelineId < getIdFromGraphQLId(req.pipeline.id),
+            )
+            .map((req) => ({ ...req.pipeline, id: getIdFromGraphQLId(req.pipeline.id) }));
+
+          this.store.storePipelines([...createdPipelines, ...this.state.pipelines]);
+        }
+
+        this.showCreationFailedAlert = hasFailedRequests;
+      },
+      deep: true,
+      immediate: true,
     },
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
     this.requestData = { page: this.page };
   },
+  beforeUnmount() {
+    clearTimeout(this.loaderTimeout);
+  },
   methods: {
     // eslint-disable-next-line vue/no-unused-properties -- successCallback() is used by the `PipelinesMixin` mixin
     successCallback(resp) {
@@ -148,6 +291,9 @@ export default {
 
       this.store.storePagination(resp.headers);
       this.setCommonData(pipelines, this.isMergeRequestTable);
+      if (!this.hasInProgressCreationRequests) {
+        this.stopDebouncedPipelineLoader();
+      }
 
       if (resp.headers?.['x-total']) {
         const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
@@ -171,6 +317,9 @@ export default {
      *
      */
     onClickRunPipeline() {
+      if (this.isRealtimePipelineCreationRequestsEnabled) {
+        this.startDebouncedPipelineLoader();
+      }
       eventHub.$emit('runMergeRequestPipeline', {
         projectId: this.projectId,
         mergeRequestId: this.mergeRequestId,
@@ -184,6 +333,78 @@ export default {
         this.$refs.modal.show();
       }
     },
+    hasSuccessCountIncreased(previousRequests = [], currentRequests = []) {
+      const oldRequestsCount = this.requestLengthByStatus(previousRequests, 'SUCCEEDED');
+      const newRequestsCount = this.requestLengthByStatus(currentRequests, 'SUCCEEDED');
+
+      return newRequestsCount > oldRequestsCount;
+    },
+    hasFailureCountIncreased(previousRequests = [], currentRequests = []) {
+      const oldRequestsCount = this.requestLengthByStatus(previousRequests, 'FAILED');
+      const newRequestsCount = this.requestLengthByStatus(currentRequests, 'FAILED');
+
+      return newRequestsCount > oldRequestsCount;
+    },
+    requestLengthByStatus(requests, status) {
+      return requests.filter((request) => request.status === status).length;
+    },
+    startDebouncedPipelineLoader() {
+      if (this.loaderTimeout) {
+        clearTimeout(this.loaderTimeout);
+      }
+
+      this.loaderTimeout = setTimeout(() => {
+        this.isCreatingPipeline = true;
+      }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+    },
+    stopDebouncedPipelineLoader() {
+      if (this.loaderTimeout) {
+        clearTimeout(this.loaderTimeout);
+        this.loaderTimeout = null;
+      }
+
+      this.isCreatingPipeline = false;
+    },
+    async action({ pipeline, mutation, mutationType, defaultErrorMessage }) {
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation,
+          variables: {
+            id: pipeline.id,
+          },
+        });
+
+        const [errorMessage] = data[mutationType]?.errors ?? [];
+
+        if (errorMessage) {
+          createAlert({
+            message: defaultErrorMessage,
+          });
+          this.captureError(errorMessage);
+        }
+      } catch (error) {
+        this.captureError(error);
+      }
+    },
+    retryPipeline(pipeline) {
+      this.action({
+        pipeline: { ...pipeline, id: convertToGraphQLId(TYPENAME_CI_PIPELINE, pipeline.id) },
+        mutation: retryPipelineMutation,
+        mutationType: 'pipelineRetry',
+        defaultErrorMessage: s__('Pipelines|The pipeline could not be retried.'),
+      });
+    },
+    cancelPipeline(pipeline) {
+      this.action({
+        pipeline: { ...pipeline, id: convertToGraphQLId(TYPENAME_CI_PIPELINE, pipeline.id) },
+        mutation: cancelPipelineMutation,
+        mutationType: 'pipelineCancel',
+        defaultErrorMessage: s__('Pipelines|The pipeline could not be canceled.'),
+      });
+    },
+    captureError(exception) {
+      Sentry.captureException(exception);
+    },
   },
   pipelineIdKey: PIPELINE_ID_KEY,
   modal: {
@@ -208,6 +429,7 @@ export default {
     ),
     runPipelineText: s__('Pipeline|Run pipeline'),
     emptyStateTitle: s__('Pipelines|There are currently no pipelines.'),
+    pipelineCreationFailed: s__('Pipeline|Pipeline creation failed. Please try again.'),
   },
   mrPipelinesDocsPath: helpPagePath('ci/pipelines/merge_request_pipelines.md', {
     anchor: 'prerequisites',
@@ -225,6 +447,12 @@ export default {
 </script>
 <template>
   <div class="content-list pipelines">
+    <gl-alert
+      v-if="showCreationFailedAlert"
+      variant="danger"
+      @dismiss="showCreationFailedAlert = false"
+      >{{ $options.i18n.pipelineCreationFailed }}</gl-alert
+    >
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('Pipelines|Loading pipelines')"
@@ -273,7 +501,8 @@ export default {
           <div class="gl-align-middle">
             <gl-button
               variant="confirm"
-              :loading="state.isRunningMergeRequestPipeline"
+              :loading="showRunPipelineButtonLoader"
+              :disabled="showRunPipelineButtonLoader"
               data-testid="run_pipeline_button"
               @click="tryRunPipeline"
             >
@@ -292,7 +521,8 @@ export default {
         <gl-button
           class="gl-mb-3 gl-mt-3 gl-w-full @md/panel:gl-w-auto"
           data-testid="run_pipeline_button_mobile"
-          :loading="state.isRunningMergeRequestPipeline"
+          :loading="showRunPipelineButtonLoader"
+          :disabled="showRunPipelineButtonLoader"
           @click="tryRunPipeline"
         >
           {{ $options.i18n.runPipelineText }}
@@ -300,20 +530,21 @@ export default {
       </div>
 
       <pipelines-table
-        :is-creating-pipeline="state.isRunningMergeRequestPipeline"
+        :is-creating-pipeline="isCreatingPipeline"
         :pipeline-id-type="$options.pipelineIdKey"
         :pipelines="state.pipelines"
         :view-type="viewType"
         class="@lg/panel:-gl-mt-px"
-        @cancel-pipeline="onCancelPipeline"
+        @cancel-pipeline="cancelPipeline"
         @refresh-pipelines-table="onRefreshPipelinesTable"
-        @retry-pipeline="onRetryPipeline"
+        @retry-pipeline="retryPipeline"
       >
         <template #table-header-actions>
           <div v-if="canRenderPipelineButton" class="gl-text-right">
             <gl-button
               data-testid="run_pipeline_button"
-              :loading="state.isRunningMergeRequestPipeline"
+              :loading="showRunPipelineButtonLoader"
+              :disabled="showRunPipelineButtonLoader"
               @click="tryRunPipeline"
             >
               {{ $options.i18n.runPipelineText }}
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 9f4e3296e72b8a97e681da70ac8608dec710b1e8..d714f78cc0d9370798dff00890d233128f7416b0 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -40,6 +40,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
   before_action only: [:show, :diffs, :rapid_diffs, :reports] do
     push_frontend_feature_flag(:mr_pipelines_graphql, project)
+    push_frontend_feature_flag(:ci_pipeline_creation_requests_realtime, project)
     push_frontend_feature_flag(:notifications_todos_buttons, current_user)
     push_frontend_feature_flag(:mr_review_batch_submit, current_user)
   end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3a1d69f38bc1c73289abdbbce137c98bfe64cbf7..09c267b84ffbc712fd94424ed608192dc7b611e7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -49397,6 +49397,9 @@ msgstr ""
 msgid "Pipeline|Pipeline cannot be run."
 msgstr ""
 
+msgid "Pipeline|Pipeline creation failed. Please try again."
+msgstr ""
+
 msgid "Pipeline|Pipelines"
 msgstr ""
 
diff --git a/spec/frontend/ci/merge_requests/mock_data.js b/spec/frontend/ci/merge_requests/mock_data.js
index 39c22c7f51cc2c3d20c823d41b5e5fc7e8278763..400749623f82f8ac00709bd0be606dcbaf1e915b 100644
--- a/spec/frontend/ci/merge_requests/mock_data.js
+++ b/spec/frontend/ci/merge_requests/mock_data.js
@@ -1,52 +1,120 @@
-const createMergeRequestPipelines = ({ mergeRequestEventType = 'MERGE_TRAIN', count = 1 } = {}) => {
-  const pipelines = [];
-
-  for (let i = 0; i < count; i += 1) {
-    pipelines.push({
-      id: `gid://gitlab/Ci::Pipeline/${i}`,
-      iid: `gid://gitlab/Ci::Pipeline/${i + 10}`,
-      path: `/project/pipelines/${i}`,
-      duration: 1000,
-      name: null,
-      finishedAt: null,
-      configSource: 'REPOSITORY_SOURCE',
-      mergeRequestEventType,
-      stuck: false,
-      failureReason: null,
-      yamlErrors: false,
-      latest: true,
-      retryable: true,
-      cancelable: false,
-      commit: {
-        id: 'gid://gitlab/Ci::Commit/1',
-        title:
-          "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
-        webPath: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
-        shortId: 'a43ea6d3',
-        authorGravatar:
-          'https://secure.gravatar.com/avatar/295d89332b1f3e65933ee72a5f1a6081dc048333a42a5dd2bb8e81fd45590b30?s=80&d=identicon',
-        author: {
-          id: '1',
-          avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
-          commitEmail: 'rando@gitlab.com',
-          name: 'Random User',
-          webUrl: 'https://gitlab.com/random_user',
+export const generateMockPipeline = ({
+  id = '123',
+  mergeRequestEventType = 'DETACHED',
+  status = 'SUCCESS',
+} = {}) => ({
+  id: `gid://gitlab/Ci::Pipeline/${id}`,
+  iid: id,
+  path: `/project/pipelines/${id}`,
+  duration: 1000,
+  name: null,
+  createdAt: '2024-01-15T10:29:00Z',
+  finishedAt: '2024-01-15T10:30:00Z',
+  configSource: 'REPOSITORY_SOURCE',
+  mergeRequestEventType,
+  stuck: false,
+  failureReason: null,
+  yamlErrors: false,
+  latest: true,
+  retryable: true,
+  cancelable: false,
+  ref: 'refs/merge-requests/1/head',
+  refPath: 'refs/heads/root-main-patch-56329',
+  refText: '',
+  source: 'merge_request_event',
+  type: 'merge_request',
+  hasManualActions: true,
+  hasScheduledActions: false,
+  commit: {
+    id: 'gid://gitlab/Ci::Commit/1',
+    name: "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
+    title:
+      "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
+    webPath: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
+    webUrl: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
+    shortId: 'a43ea6d3',
+    sha: 'a43ea6d3fc81257b1caeeaceb21b36349110ad54',
+    authorGravatar:
+      'https://secure.gravatar.com/avatar/295d89332b1f3e65933ee72a5f1a6081dc048333a42a5dd2bb8e81fd45590b30?s=80&d=identicon',
+    author: {
+      id: '1',
+      avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
+      commitEmail: 'rando@gitlab.com',
+      name: 'Random User',
+      webUrl: 'https://gitlab.com/random_user',
+      webPath: '/random_user',
+    },
+  },
+  detailedStatus: {
+    id: `${status.toLowerCase()}-${id}-${id}`,
+    hasDetails: true,
+    detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}`,
+    label: status.toLowerCase(),
+    name: status,
+  },
+  stages: {
+    nodes: [
+      {
+        id: 'gid://gitlab/Ci::Stage/1949',
+        name: 'build',
+        detailedStatus: {
+          id: 'success-1949-1949',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#build`,
+          tooltip: 'passed',
         },
       },
-      detailedStatus: {
-        id: '1',
-        hasDetails: true,
-        detailsPath: `/gitlab-org/gitlab/-/pipelines/${i}`,
-        label: 'skipped',
-        name: 'SKIPPED',
+      {
+        id: 'gid://gitlab/Ci::Stage/1950',
+        name: 'test',
+        detailedStatus: {
+          id: 'success-1950-1950',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#test`,
+          tooltip: 'passed',
+        },
       },
-      user: {
-        id: 'gid://gitlab/User/1',
-        avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
-        name: 'Random User',
-        path: '/random_user',
+      {
+        id: 'gid://gitlab/Ci::Stage/1951',
+        name: 'deploy',
+        detailedStatus: {
+          id: 'success-1951-1951',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#deploy`,
+          tooltip: 'passed',
+        },
       },
-    });
+    ],
+  },
+  mergeRequest: {
+    id: 'gid://gitlab/MergeRequest/1',
+    iid: '1',
+    webPath: '/gitlab-org/gitlab/-/merge_requests/1',
+    title: 'Edit README.md',
+  },
+  project: {
+    id: 'gid://gitlab/Project/1',
+    fullPath: 'gitlab-org/gitlab',
+  },
+  user: {
+    id: 'gid://gitlab/User/1',
+    avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
+    name: 'Random User',
+    path: '/random_user',
+    webPath: '/random_user',
+  },
+});
+
+const createMergeRequestPipelines = ({ mergeRequestEventType = 'MERGE_TRAIN', count = 1 } = {}) => {
+  const pipelines = [];
+
+  for (let i = 0; i < count; i += 1) {
+    pipelines.push(
+      generateMockPipeline({ id: String(i), mergeRequestEventType, status: 'SKIPPED' }),
+    );
   }
 
   return {
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 3a76e27d23f6075670e617194c33b4e6a892acfb..aecd410ce06e6e6b732b90c63115bf5d253c67f0 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -19,6 +19,12 @@ import {
 import { createAlert } from '~/alert';
 import { TOAST_MESSAGE } from '~/ci/pipeline_details/constants';
 import axios from '~/lib/utils/axios_utils';
+import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
+import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { generateMockPipeline } from 'jest/ci/merge_requests/mock_data';
+import retryPipelineMutation from '~/ci/pipelines_page/graphql/mutations/retry_pipeline.mutation.graphql';
+import cancelPipelineMutation from '~/ci/pipelines_page/graphql/mutations/cancel_pipeline.mutation.graphql';
 
 Vue.use(VueApollo);
 
@@ -28,10 +34,56 @@ const $toast = {
 
 jest.mock('~/alert');
 
+const generateMockPipelineCreationMergeRequest = (requests) => ({
+  id: 'gid://gitlab/MergeRequest/3',
+  iid: '3',
+  title: 'Test MR',
+  webPath: '/test/project/-/merge_requests/3',
+  pipelineCreationRequests: requests,
+});
+
+const generatePipelineCreationRequestsResponse = ({
+  requests = [
+    { status: 'IN_PROGRESS', pipelineId: null, error: null, pipeline: null },
+    {
+      status: 'SUCCEEDED',
+      pipelineId: '123',
+      error: null,
+      pipeline: generateMockPipeline({ id: '123' }),
+    },
+  ],
+} = {}) => ({
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/5',
+      fullPath: 'test/project',
+      mergeRequest: generateMockPipelineCreationMergeRequest(requests),
+    },
+  },
+});
+
+const generatePipelineCreationSubscriptionUpdateResponse = ({
+  requests = [
+    { status: 'IN_PROGRESS', pipelineId: null, error: null, pipeline: null },
+    {
+      status: 'SUCCEEDED',
+      pipelineId: '123',
+      error: null,
+      pipeline: generateMockPipeline({ id: '123' }),
+    },
+  ],
+} = {}) => ({
+  data: {
+    ciPipelineCreationRequestsUpdated: generateMockPipelineCreationMergeRequest(requests),
+  },
+});
+
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
   let mock;
+  let getPipelineCreationRequestsHandler;
+  let mockSubscriptionHandler;
   const showMock = jest.fn();
 
   const findRunPipelineBtn = () => wrapper.findByTestId('run_pipeline_button');
@@ -45,8 +97,32 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findMrPipelinesDocsLink = () => wrapper.findByTestId('mr-pipelines-docs-link');
   const findUserPermissionsDocsLink = () => wrapper.findByTestId('user-permissions-docs-link');
   const findPipelinesTable = () => wrapper.findComponent(PipelinesTable);
+  const findSkeletonLoader = () => wrapper.find('.gl-animate-skeleton-loader');
+  const findCreationFailedAlert = () => wrapper.findComponent({ name: 'GlAlert' });
+
+  const createComponent = ({
+    props = {},
+    handlers = [],
+    mountFn = mountExtended,
+    glFeatures = { ciPipelineCreationRequestsRealtime: false },
+  } = {}) => {
+    const requestHandlers = [
+      [getPipelineCreationRequests, getPipelineCreationRequestsHandler],
+      ...handlers,
+    ];
+
+    const subscriptionHandlers = [
+      [pipelineCreationRequestsUpdatedSubscription, mockSubscriptionHandler],
+    ];
+
+    const apolloProvider = createMockApollo(requestHandlers);
+
+    subscriptionHandlers.forEach(([query, handler]) => {
+      apolloProvider.defaultClient.setRequestHandler(query, handler);
+    });
+
+    apolloProvider.defaultClient.clearStore();
 
-  const createComponent = ({ props = {}, mountFn = mountExtended } = {}) => {
     wrapper = mountFn(LegacyPipelinesTableWrapper, {
       propsData: {
         endpoint: 'endpoint.json',
@@ -57,18 +133,28 @@ describe('Pipelines table in Commits and Merge requests', () => {
       mocks: {
         $toast,
       },
+      provide: {
+        glFeatures,
+      },
       stubs: {
         GlModal: stubComponent(GlModal, {
           template: '<div />',
           methods: { show: showMock },
         }),
       },
-      apolloProvider: createMockApollo(),
+      apolloProvider,
     });
   };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+    getPipelineCreationRequestsHandler = jest
+      .fn()
+      .mockResolvedValue(generatePipelineCreationRequestsResponse());
+
+    mockSubscriptionHandler = jest
+      .fn()
+      .mockResolvedValue(generatePipelineCreationSubscriptionUpdateResponse());
 
     const { pipelines } = fixture;
 
@@ -240,6 +326,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 isMergeRequestTable: true,
                 mergeRequestId: 3,
                 projectId: '5',
+                targetProjectFullPath: 'test/project',
               },
             });
 
@@ -256,18 +343,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
             await findRunPipelineBtnMobile().trigger('click');
 
             expect(findRunPipelineBtn().props('loading')).toBe(true);
-
-            await waitForPromises();
-
-            expect(findRunPipelineBtn().props('disabled')).toBe(false);
-          });
-
-          it('sets isCreatingPipeline to true in pipelines table', async () => {
-            expect(findPipelinesTable().props('isCreatingPipeline')).toBe(false);
-
-            await findRunPipelineBtn().trigger('click');
-
-            expect(findPipelinesTable().props('isCreatingPipeline')).toBe(true);
           });
         });
 
@@ -422,6 +497,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
     describe('When cancelling a pipeline', () => {
       it('sends the cancel action', async () => {
+        const cancelPipelineMutationHandler = jest.fn().mockResolvedValue({
+          data: {
+            pipelineCancel: {
+              errors: [],
+            },
+          },
+        });
+
         const cancelablePipeline = {
           ...pipeline,
           cancel_path: '/root/project/-/pipelines/1/cancel',
@@ -431,27 +514,47 @@ describe('Pipelines table in Commits and Merge requests', () => {
           },
         };
 
-        expect(mock.history.post).toHaveLength(0);
+        createComponent({
+          mountFn: shallowMountExtended,
+          handlers: [[cancelPipelineMutation, cancelPipelineMutationHandler]],
+        });
+
+        await waitForPromises();
 
         findPipelinesTable().vm.$emit('cancel-pipeline', cancelablePipeline);
 
         await waitForPromises();
 
-        expect(mock.history.post).toHaveLength(1);
-        expect(mock.history.post[0].url).toContain('cancel.json');
+        expect(cancelPipelineMutationHandler).toHaveBeenCalledWith({
+          id: `gid://gitlab/Ci::Pipeline/${cancelablePipeline.id}`,
+        });
       });
     });
 
     describe('When retrying a pipeline', () => {
       it('sends the retry action', async () => {
-        expect(mock.history.post).toHaveLength(0);
+        const retryPipelineMutationHandler = jest.fn().mockResolvedValue({
+          data: {
+            pipelineRetry: {
+              errors: [],
+            },
+          },
+        });
+
+        createComponent({
+          mountFn: shallowMountExtended,
+          handlers: [[retryPipelineMutation, retryPipelineMutationHandler]],
+        });
+
+        await waitForPromises();
 
         findPipelinesTable().vm.$emit('retry-pipeline', pipeline);
 
         await waitForPromises();
 
-        expect(mock.history.post).toHaveLength(1);
-        expect(mock.history.post[0].url).toContain('retry.json');
+        expect(retryPipelineMutationHandler).toHaveBeenCalledWith({
+          id: `gid://gitlab/Ci::Pipeline/${pipeline.id}`,
+        });
       });
     });
 
@@ -468,4 +571,515 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
     });
   });
+
+  describe('GraphQL pipeline creation requests', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    beforeEach(() => {
+      mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [
+        {
+          ...pipeline,
+          flags: {
+            ...pipeline.flags,
+            detached_merge_request_pipeline: true,
+            merge_request_pipeline: true,
+          },
+        },
+      ]);
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+    });
+
+    describe('with feature flag ci_pipeline_creation_requests_realtime', () => {
+      describe('when feature flag is OFF', () => {
+        it('skips getPipelineCreationRequests query', async () => {
+          createComponent({
+            props: {
+              isMergeRequestTable: true,
+              targetProjectFullPath: 'test/project',
+              mergeRequestId: 3,
+            },
+          });
+
+          await waitForPromises();
+
+          expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+        });
+
+        it('skips subscription', async () => {
+          createComponent({
+            props: {
+              isMergeRequestTable: true,
+              targetProjectFullPath: 'test/project',
+              mergeRequestId: 3,
+            },
+          });
+
+          await waitForPromises();
+
+          expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('when feature flag is ON', () => {
+        let glFeatures;
+
+        beforeEach(() => {
+          glFeatures = { ciPipelineCreationRequestsRealtime: true };
+        });
+
+        describe('getPipelineCreationRequests query', () => {
+          it('calls getPipelineCreationRequests query with correct variables', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(getPipelineCreationRequestsHandler).toHaveBeenCalledWith({
+              fullPath: 'test/project',
+              mergeRequestIid: '3',
+            });
+          });
+
+          it.each`
+            scenario                              | isMergeRequestTable | targetProjectFullPath | mergeRequestId
+            ${'not on merge request table'}       | ${false}            | ${'test/project'}     | ${3}
+            ${'mergeRequestId is missing'}        | ${true}             | ${'test/project'}     | ${null}
+            ${'targetProjectFullPath is missing'} | ${true}             | ${null}               | ${3}
+          `(
+            'skips query when $scenario',
+            async ({ isMergeRequestTable, targetProjectFullPath, mergeRequestId }) => {
+              createComponent({
+                props: {
+                  isMergeRequestTable,
+                  targetProjectFullPath,
+                  mergeRequestId,
+                },
+                glFeatures,
+              });
+
+              await waitForPromises();
+
+              expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+            },
+          );
+        });
+
+        describe('pipelineCreationRequestsUpdated subscription', () => {
+          it('calls subscription with correct variables', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(mockSubscriptionHandler).toHaveBeenCalledWith({
+              mergeRequestId: 'gid://gitlab/MergeRequest/3',
+            });
+          });
+
+          const mockMergeRequestGlobalId = () =>
+            getPipelineCreationRequestsHandler.mockResolvedValue({
+              data: {
+                project: {
+                  id: 'gid://gitlab/Project/5',
+                  mergeRequest: { id: null, pipelineCreationRequests: [] },
+                },
+              },
+            });
+
+          it.each`
+            scenario                                   | isMergeRequestTable | targetProjectFullPath | mergeRequestId | mockHandlerSetup
+            ${'not on merge request table'}            | ${false}            | ${'test/project'}     | ${3}           | ${undefined}
+            ${'mergeRequestId is missing'}             | ${true}             | ${'test/project'}     | ${null}        | ${undefined}
+            ${'targetProjectFullPath is missing'}      | ${true}             | ${null}               | ${3}           | ${undefined}
+            ${'mergeRequestGlobalId is not available'} | ${true}             | ${'test/project'}     | ${3}           | ${mockMergeRequestGlobalId}
+          `(
+            'skips subscription when $scenario',
+            async ({
+              isMergeRequestTable,
+              targetProjectFullPath,
+              mergeRequestId,
+              mockHandlerSetup,
+            }) => {
+              if (mockHandlerSetup) {
+                mockHandlerSetup();
+              }
+
+              createComponent({
+                props: {
+                  isMergeRequestTable,
+                  targetProjectFullPath,
+                  mergeRequestId,
+                },
+                glFeatures,
+              });
+
+              await waitForPromises();
+
+              expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+            },
+          );
+        });
+
+        describe('Pipeline creation failed alert', () => {
+          it('shows alert when pipeline creation fails', async () => {
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(findCreationFailedAlert().exists()).toBe(true);
+            expect(findCreationFailedAlert().text()).toBe(
+              'Pipeline creation failed. Please try again.',
+            );
+            expect(findCreationFailedAlert().props('variant')).toBe('danger');
+            expect(findCreationFailedAlert().props('dismissible')).toBe(true);
+          });
+
+          it('hides alert when dismissed', async () => {
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(findCreationFailedAlert().exists()).toBe(true);
+
+            await findCreationFailedAlert().vm.$emit('dismiss');
+
+            expect(findCreationFailedAlert().exists()).toBe(false);
+          });
+
+          it('shows alert when failure count increases via subscription', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(findCreationFailedAlert().exists()).toBe(false);
+
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
+
+            await wrapper.vm.$apollo.queries.pipelineCreationRequests.refetch();
+            await waitForPromises();
+
+            await nextTick();
+
+            expect(findCreationFailedAlert().exists()).toBe(true);
+          });
+        });
+
+        describe('Run pipeline button', () => {
+          describe('when there are in progress pipeline creation requests', () => {
+            it.each([
+              {
+                buttonType: 'desktop',
+                findRunButton: () => findRunPipelineBtn(),
+              },
+              {
+                buttonType: 'mobile',
+                findRunButton: () => findRunPipelineBtnMobile(),
+              },
+              {
+                buttonType: 'empty state',
+                findRunButton: () => findRunPipelineBtn(),
+              },
+            ])('disables the $buttonType button & enables loading', async ({ findRunButton }) => {
+              const inProgressRequests = [
+                { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              ];
+
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+              );
+
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+                glFeatures,
+              });
+
+              await waitForPromises();
+
+              expect(findRunButton().exists()).toBe(true);
+              expect(findRunButton().props('disabled')).toBe(true);
+              expect(findRunButton().props('loading')).toBe(true);
+            });
+          });
+
+          describe('shows skeleton loader', () => {
+            it('after a small delay when run pipeline button is clicked', async () => {
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+                glFeatures,
+              });
+
+              await waitForPromises();
+
+              expect(findSkeletonLoader().exists()).toBe(false);
+
+              await findRunPipelineBtn().trigger('click');
+
+              expect(findSkeletonLoader().exists()).toBe(false);
+
+              jest.runAllTimers();
+              await nextTick();
+
+              expect(findSkeletonLoader().exists()).toBe(true);
+            });
+
+            it('when hasInProgressCreationRequests becomes true', async () => {
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({
+                  requests: [
+                    { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+                  ],
+                }),
+              );
+
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+                glFeatures,
+              });
+
+              await waitForPromises();
+
+              expect(findSkeletonLoader().exists()).toBe(false);
+
+              jest.runAllTimers();
+              await nextTick();
+
+              expect(findSkeletonLoader().exists()).toBe(true);
+            });
+          });
+        });
+
+        describe('debounced pipeline loader', () => {
+          it('shows skeleton loader after debounce delay when run pipeline button is clicked', async () => {
+            createComponent({
+              props: {
+                canRunPipeline: true,
+                isMergeRequestTable: true,
+                mergeRequestId: 3,
+                projectId: '5',
+                targetProjectFullPath: 'test/project',
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+
+            findRunPipelineBtn().trigger('click');
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+          });
+
+          it('stops showing skeleton loader when pipeline creation completes', async () => {
+            const inProgressRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+            ];
+            const completedRequests = [
+              {
+                status: 'SUCCEEDED',
+                pipelineId: '123',
+                pipeline: generateMockPipeline({ id: '123' }),
+                error: null,
+              },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: completedRequests }),
+            );
+
+            mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
+
+            findPipelinesTable().vm.$emit('refresh-pipelines-table');
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+          });
+
+          it('continues showing skeleton loader when there are still in-progress requests', async () => {
+            const inProgressRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+
+            const mixedRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              {
+                status: 'SUCCEEDED',
+                pipelineId: '123',
+                pipeline: generateMockPipeline({ id: '123' }),
+                error: null,
+              },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: mixedRequests }),
+            );
+
+            mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [
+              {
+                ...pipeline,
+                flags: {
+                  ...pipeline.flags,
+                  detached_merge_request_pipeline: true,
+                  merge_request_pipeline: true,
+                },
+              },
+            ]);
+            findPipelinesTable().vm.$emit('refresh-pipelines-table');
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+          });
+
+          it('clears timeout on component unmount', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+              glFeatures,
+            });
+
+            await waitForPromises();
+
+            const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+            findRunPipelineBtn().trigger('click');
+
+            wrapper.destroy();
+
+            expect(clearTimeoutSpy).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
 });