> 在我們的後台頁面稍微作出個樣子之後，可以稍微來新增一些樣式，讓整個畫面看起來更專業！
> 此篇文章想跟大家分享的是 **讀取的視覺效果 Loading**，適當加上視覺效果可以讓頁面在讀取時不會一片空白，若是讀取時間較長，也可以透過讀取效果來提升使用者體驗，那我們就開始吧！

### 使用 vue3-loading-overlay 套件
* 安裝套件（參考[文件](https://github.com/moyoujun/vue3-loading-overlay?tab=readme-ov-file)）

  npm install vue3-loading-overlay

* 將元件新增到 ***main.js***

  // 插入元件
  import Loading from 'vue3-loading-overlay'
  // 插入樣式
  import 'vue3-loading-overlay/dist/vue3-loading-overlay.css'

  // 進行全域註冊
  app.component('LoadingOverlay', Loading)

* 回到 ***ProductsPage.vue*** 插入元件

  <LoadingOverlay :active="isLoading"></LoadingOverlay>

參考 [文件](https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loading-demo.png?alt=media&token=217ba502-a010-4ca4-a679-67e7626dd6f0) 的撰寫方式：
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loading_use.png?alt=media&token=a7f0c6f2-2300-41d7-aa0a-c3152e5e7a7c">
* 接著將 `isLoading` 這個狀態加到 `data`，並預設為 `false`

    export default {
      data () {
        return {
          products: [],
          pagination: {},
          tempProduct: {},
          isNew: false,
          isLoading: false
        }
      },

* 接著到需要使用的函式中做插入
* 讀取資料前 **顯示**：`this.isLoading = true`
* 讀取資料後 **不顯示**：`this.isLoading = false`

    <template>
      <LoadingOverlay :active="isLoading"></LoadingOverlay>
      ...
    </template>

    <script>
    getProducts () {
        const api = `${process.env.VUE_APP_API}api/${process.env.VUE_APP_PATH}/admin/products`
        // 讀取資料前顯示
        this.isLoading = true
        this.axios.get(api)
          .then((res) => {
            // 讀取資料後不顯示
            this.isLoading = false
            if (res.data.success) {
              console.log(res.data)
              this.products = res.data.products
              this.pagination = res.data.pagination
            }
          })
        },
      ...
    </script>

#### 預設樣式
* 完成設定後會如下圖顯示
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loading-demo.png?alt=media&token=217ba502-a010-4ca4-a679-67e7626dd6f0">

#### 自訂樣式
若是希望可以自訂樣式，可以參考 [loading.io](https://loading.io/) 此網站提供許多樣式可以做使用。

* 此網站會需要先註冊並登入方可下載，有些資源是免費的，有些是付費的，可以斟酌使用
* 找到喜歡的讀取效果後，點擊下方的 `Download As > more > css` 來進行下載
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loading.io.png?alt=media&token=3d5e9d61-dbd1-4d63-8a49-e49dc503303e">
* 下載後會得到一個 HTML 檔案：
* 請將其中的 HTML 內容新增到 `<LoadingOverlay></LoadingOverlay>` 裡面

    <LoadingOverlay :active="isLoading">
      <div class="loadingio-spinner-ellipsis-nq4q5u6dq7r"><div class="ldio-x2uulkbinbj">
      <div></div><div></div><div></div><div></div><div></div>
      </div></div>
    </LoadingOverlay>

* 接著同步新增文件中的 CSS 內容到你的檔案中即可做使用
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loading_io.png?alt=media&token=f265c9af-d815-4483-87a1-51657477ea20">
* 完成後如下圖
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/loadinf_io_demo.gif?alt=media&token=6539773a-687e-4941-b915-72aeeeee524f">