JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div class="order">
  <p>尊貴的客戶您好，您上次的消費內容是：</p>
  <p>訂單編號：<span class="order_id"></span></p>
  <p>訂單內容：<span class="order_content"></span></p>
  <p>訂單金額：<span class="order_amount"></span></p>
  <p>希望這次也能有機會服務您！</p>
</div>

<div class="overlay"></div>

CSS

.overlay {
  position: absolute;
  inset: 0;
  background-color: #0005;
  justify-content: center;
  align-items: center;
  display: none;
}

.overlay.active {
  display: flex;
}

.overlay::after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-color: #fff #fff #fff transparent;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  to {
    transform: rotate(0)
  }
  from {
    transform: rotate(360deg)
  }
}

JavaScript

const getUserAPI = 'https://codelove.tw/fake-api/get-current-user-unstable'
const getOrdersAPI = 'https://codelove.tw/fake-api/get-orders-unstable'
const getOrderDetailsAPI = 'https://codelove.tw/fake-api/get-order-details-unstable'


function getFinalOrderDetail() {
	const overlay = $('.overlay')
  
	overlay.addClass('active')

  $.ajax({
    type: 'GET',
    url: getUserAPI,
    success(res) {  	
      const userId = res.data.user.id

      $.ajax({
        type: 'GET',
        url: getOrdersAPI,
        data: { user_id: userId },
        success(res) {
          const lastOrderId = res.data.orders.at(-1).id

          $.ajax({
            type: 'GET',
            url: getOrderDetailsAPI,
            data: { order_id: lastOrderId },
            success(res) {
              const {id, content, amount} = res.data.order

              $('.order_id').text(id)
              $('.order_content').text(content)
              $('.order_amount').text(amount)
            },
            error(err) {
              alert('讀取訂單細節失敗，請稍後再試一次。')
            },
            complete() {
              overlay.removeClass('active')
            }
          })
        },
        error(err) {
          alert('讀取訂單列表失敗，請稍後再試一次。')
          overlay.removeClass('active')
        }
      })
    },
    error(err) {
      alert('讀取用戶失敗，請稍後再試一次。')
      overlay.removeClass('active')
    }
  })
}
getFinalOrderDetail()