diff --git a/web_src/js/components/dataset/referenceDataset.vue b/web_src/js/components/dataset/referenceDataset.vue
index 9cb356272..d52a6cfc2 100644
--- a/web_src/js/components/dataset/referenceDataset.vue
+++ b/web_src/js/components/dataset/referenceDataset.vue
@@ -1,165 +1,170 @@
 <template>
   <div>
     <template v-if="showFlag">
-      <div class="ui container">
-        <div class="ui mobile reversed stackable grid">
-          <div class="row" style="justify-content: space-between">
-            <div class="ui blue small menu compact selectcloudbrain">
-              <a class="item" :href="`${repoLink}/datasets`">{{
-                i18n.current_dataset
-              }}</a>
-              <a
-                class="active item"
-                :href="`${repoLink}/datasets/reference_datasets`"
-                >{{ i18n.linked_datasets }}</a
+      <div v-loading="loadingLinkPage">
+        <div class="ui container">
+          <div class="ui mobile reversed stackable grid">
+            <div class="row" style="justify-content: space-between">
+              <div class="ui blue small menu compact selectcloudbrain">
+                <a class="item" :href="`${repoLink}/datasets`">{{
+                  i18n.current_dataset
+                }}</a>
+                <a
+                  class="active item"
+                  :href="`${repoLink}/datasets/reference_datasets`"
+                  >{{ i18n.linked_datasets }}</a
+                >
+              </div>
+              <button
+                style="margin-right: 2rem"
+                class="ui green button"
+                @click="openDataset()"
               >
+                {{ i18n.linked_datasets }}
+              </button>
             </div>
-            <button
-              style="margin-right: 2rem"
-              class="ui green button"
-              @click="openDataset()"
-            >
-              {{ i18n.linked_datasets }}
-            </button>
-          </div>
-          <div class="row">
-            <div class="ui two cards" style="width: 100%">
-              <div
-                class="ui card refer-dataset-card"
-                v-for="(item, index) in datasetList"
-                :key="index"
-                @click="gotoDataset(item)"
-              >
-                <div class="content" style="border-bottom: none">
-                  <div class="refer-dataset-card-content">
-                    <div class="refer-dataset-card-title">
-                      <span
-                        :title="item.Title"
-                        class="nowrap"
-                        style="display: inline-block; max-width: 90%"
-                        >{{ item.Title }}</span
-                      ><img
-                        v-if="item.Recommend"
-                        src="/img/jian.svg"
-                        style="margin-left: 0.5rem"
-                      />
-                    </div>
-                    <template v-if="item.IsStaring">
-                      <div style="display: flex">
-                        <button
-                          class="ui mini basic button dataset-card-flavor"
-                          @click.stop="postStar(item)"
-                        >
-                          <i class="ri-heart-fill" style="color: #fa8c16"></i>
-                          <span style="margin-left: 0.3rem">{{
-                            i18n.unfavorite
-                          }}</span>
-                        </button>
-                        <a class="ui mini basic button card-flavor-num">
-                          {{ item.NumStars }}
-                        </a>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <div style="display: flex">
-                        <button
-                          class="ui mini basic button dataset-card-flavor"
-                          @click.stop="postStar(item)"
-                        >
-                          <i class="ri-heart-line"></i>
-                          <span style="margin-left: 0.3rem">{{
-                            i18n.favorite
-                          }}</span>
-                        </button>
-                        <a class="ui mini basic button card-flavor-num">
-                          {{ item.NumStars }}
-                        </a>
+            <div class="row">
+              <div class="ui two cards" style="width: 100%">
+                <div
+                  class="ui card refer-dataset-card"
+                  v-for="(item, index) in datasetList"
+                  :key="index"
+                  @click="gotoDataset(item)"
+                >
+                  <div class="content" style="border-bottom: none">
+                    <div class="refer-dataset-card-content">
+                      <div class="refer-dataset-card-title">
+                        <span
+                          :title="item.Title"
+                          class="nowrap"
+                          style="display: inline-block; max-width: 90%"
+                          >{{ item.Title }}</span
+                        ><img
+                          v-if="item.Recommend"
+                          src="/img/jian.svg"
+                          style="margin-left: 0.5rem"
+                        />
                       </div>
-                    </template>
-                  </div>
-                  <div style="font-size: 12px; margin-top: 5px">
-                    <a
-                      v-if="item.Category"
-                      :href="'/explore/datasets?category=' + item.Category"
-                      class="ui repo-topic label topic"
-                      >{{ i18n[item.Category] || item.Category }}</a
-                    >
-                    <a
-                      v-if="item.Task"
-                      :href="'/explore/datasets?task=' + item.Task"
-                      class="ui repo-topic label topic"
-                      >{{ i18n[item.Task] || item.Task }}</a
-                    >
-                    <a
-                      v-if="item.License"
-                      :href="'/explore/datasets?license=' + item.License"
-                      class="ui repo-topic label topic"
-                      >{{ item.License }}</a
-                    >
-                  </div>
-                  <div class="description card-flavor-desc">
-                    <p>{{ item.Description }}</p>
+                      <template v-if="item.IsStaring">
+                        <div style="display: flex">
+                          <button
+                            class="ui mini basic button dataset-card-flavor"
+                            @click.stop="postStar(item)"
+                          >
+                            <i class="ri-heart-fill" style="color: #fa8c16"></i>
+                            <span style="margin-left: 0.3rem">{{
+                              i18n.unfavorite
+                            }}</span>
+                          </button>
+                          <a class="ui mini basic button card-flavor-num">
+                            {{ item.NumStars }}
+                          </a>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div style="display: flex">
+                          <button
+                            class="ui mini basic button dataset-card-flavor"
+                            @click.stop="postStar(item)"
+                          >
+                            <i class="ri-heart-line"></i>
+                            <span style="margin-left: 0.3rem">{{
+                              i18n.favorite
+                            }}</span>
+                          </button>
+                          <a class="ui mini basic button card-flavor-num">
+                            {{ item.NumStars }}
+                          </a>
+                        </div>
+                      </template>
+                    </div>
+                    <div style="font-size: 12px; margin-top: 5px">
+                      <a
+                        v-if="item.Category"
+                        :href="'/explore/datasets?category=' + item.Category"
+                        class="ui repo-topic label topic"
+                        >{{ i18n[item.Category] || item.Category }}</a
+                      >
+                      <a
+                        v-if="item.Task"
+                        :href="'/explore/datasets?task=' + item.Task"
+                        class="ui repo-topic label topic"
+                        >{{ i18n[item.Task] || item.Task }}</a
+                      >
+                      <a
+                        v-if="item.License"
+                        :href="'/explore/datasets?license=' + item.License"
+                        class="ui repo-topic label topic"
+                        >{{ item.License }}</a
+                      >
+                    </div>
+                    <div class="description card-flavor-desc">
+                      <p>{{ item.Description }}</p>
+                    </div>
                   </div>
-                </div>
-                <div class="extra content" style="border-top: none !important">
-                  <div style="display: flex; align-items: center">
-                    <a
-                      :href="'/' + item.Repo.OwnerName"
-                      :title="item.Repo.OwnerName"
-                    >
-                      <img
-                        class="ui avatar image"
-                        style="width: 22px; height: 22px"
-                        :src="'/user/avatar/' + item.Repo.OwnerName + '/-1'"
-                      />
-                    </a>
-                    <span
-                      style="
-                        color: #999999;
-                        font-size: 12px;
-                        margin-left: 0.5rem;
-                      "
-                      >{{ item.CreatedUnix | transformTimestamp }}</span
-                    >
-                    <span
-                      style="
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        margin: 0 1rem;
-                      "
-                      title="引用次数"
-                    >
-                      <i class="ri-link"></i>
+                  <div
+                    class="extra content"
+                    style="border-top: none !important"
+                  >
+                    <div style="display: flex; align-items: center">
+                      <a
+                        :href="'/' + item.Repo.OwnerName"
+                        :title="item.Repo.OwnerName"
+                      >
+                        <img
+                          class="ui avatar image"
+                          style="width: 22px; height: 22px"
+                          :src="'/user/avatar/' + item.Repo.OwnerName + '/-1'"
+                        />
+                      </a>
                       <span
                         style="
-                          color: #101010;
+                          color: #999999;
                           font-size: 12px;
-                          margin-left: 0.2rem;
+                          margin-left: 0.5rem;
                         "
-                        >{{ item.UseCount }}</span
+                        >{{ item.CreatedUnix | transformTimestamp }}</span
                       >
-                    </span>
-                    <span
-                      style="display: flex; align-items: center; flex: 1"
-                      title="下载次数"
-                    >
-                      <i class="ri-download-line"></i>
                       <span
                         style="
-                          color: #101010;
-                          font-size: 12px;
-                          margin-left: 0.2rem;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                          margin: 0 1rem;
                         "
-                        >{{ item.DownloadTimes }}</span
+                        title="引用次数"
                       >
-                    </span>
-                    <button
-                      class="ui mini button"
-                      @click.stop="cancelReferData(item.ID)"
-                    >
-                      {{ i18n.disassociate }}
-                    </button>
+                        <i class="ri-link"></i>
+                        <span
+                          style="
+                            color: #101010;
+                            font-size: 12px;
+                            margin-left: 0.2rem;
+                          "
+                          >{{ item.UseCount }}</span
+                        >
+                      </span>
+                      <span
+                        style="display: flex; align-items: center; flex: 1"
+                        title="下载次数"
+                      >
+                        <i class="ri-download-line"></i>
+                        <span
+                          style="
+                            color: #101010;
+                            font-size: 12px;
+                            margin-left: 0.2rem;
+                          "
+                          >{{ item.DownloadTimes }}</span
+                        >
+                      </span>
+                      <button
+                        class="ui mini button"
+                        @click.stop="cancelReferData(item.ID)"
+                      >
+                        {{ i18n.disassociate }}
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -234,7 +239,7 @@
         >
           <el-tabs v-model="activeName">
             <el-tab-pane :label="i18n.public_dataset" name="first">
-              <el-row>
+              <el-row v-loading="loadingPublicPage">
                 <el-checkbox-group
                   v-model="checkList"
                   style="font-size: 14px; line-height: 1"
@@ -364,6 +369,8 @@ export default {
 
       totalNum: 0,
       currentPage: 1,
+      loadingLinkPage: false,
+      loadingPublicPage: false,
     };
   },
   methods: {
@@ -454,16 +461,26 @@ export default {
     },
 
     getSelectDatasetList() {
+      this.loadingLinkPage = true;
       let url = `${this.repoLink}/datasets/reference_datasets_data`;
       this.$axios.get(url).then((res) => {
-        this.datasetList = res.data;
-        this.datasetList.length
-          ? (this.showFlag = true)
-          : (this.showFlag = false);
+        this.loadingLinkPage = false;
+        console.log(res);
+        if (!res.data) {
+          this.showFlag = false;
+          return;
+        } else {
+          this.datasetList = res.data;
+          this.datasetList.length
+            ? (this.showFlag = true)
+            : (this.showFlag = false);
+        }
+
         console.log("this.getDatasetList:", this.datasetList);
       });
     },
     getDatasetList() {
+      this.loadingPublicPage = true;
       let url = `${this.repoLink}/datasets/reference_datasets_available`;
       this.$axios
         .get(url, {
@@ -472,16 +489,21 @@ export default {
         .then((res) => {
           this.publicDatasetList = JSON.parse(res.data.data);
           this.totalNum = parseInt(res.data.count);
+          this.loadingPublicPage = false;
           // this.search = "";
           // this.searchName();
         });
     },
     submitReferDataset() {
       let url = `${this.repoLink}/datasets/reference_datasets`;
-      let data = this.qs.stringify({
-        _csrf: csrf,
-        dataset_id: this.checkList,
-      });
+      let data = this.qs.stringify(
+        {
+          _csrf: csrf,
+          dataset_id: this.checkList,
+        },
+        { arrayFormat: "repeat" }
+      );
+      console.log(data);
       this.$axios.post(url, data).then((res) => {
         if (res.data.Code === 0) {
           this.getSelectDatasetList();