2 files changed, 5 insertions, 1 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
index 1a1a2a46..25687f67 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
@@ -13,6 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
+<nz-spin [nzSpinning]="isSpinning" nzSize="large">
 <div class="model">
   <!--chart-->
   <button nz-button nzType="primary" *ngIf="!nonetwork" style="margin-top: 2px;display: inline-block" (click)="showForm()"
@@ -148,4 +149,4 @@
     <button nz-button nzType="default" nzSize="small" class="del-button" style="width: 60px;" (click)="hideForm()"> {{"i18nTextDefine_Cancel" | translate}} </button>
   </div>
 </div>
-
+</nz-spin>
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index 9a5b0e23..bb0dd967 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -87,6 +87,7 @@ export class CcvpnNetworkComponent implements OnInit {
     outCloudShow = false;
     inputshow = false;
     delBoxisVisible = false;
+    isSpinning = true;
 
     d3Data = [];//D3Render the required data
     logicalLinks = [];//logicalLinks Existing connection data returned by the interface
@@ -166,8 +167,10 @@ export class CcvpnNetworkComponent implements OnInit {
 
     //Get cloud image data
     getD3Data() {
+        this.isSpinning = true;
         this.myhttp.getNetworkD3Data()
             .subscribe((data) => {
+                this.isSpinning = false;
                 if (data.length == 0) {
                     this.addLinkDisabled = false;
                     this.nonetwork = true;