Base solution for your next web application
Open Closed

Show Spinner on specific HTML element. #9637

User avatar
0
shridhar.mole created

Product version : 8.9 Product type : Angular Framework : .net core

I want to show spinner only on to the specific div which takes some time to load data in it. I have one simple div and I set [busyIf] directive to it. I get the spinner on my whole page which I don't want(spinner which we show using "this.spinnerService.show()"). Please help.

Go to accepted answer
10 Answer(s)
  • User Avatar
    0
    smry created

    [busyIf] works exactly how you are describing it, add it to a div and add a state bool to trigger on/off/finished-loading-data

    In the ASPNETZero source code I believe all the tables and dashboard widgets have code you can try to replicate

    I would recommend trying to put a very clearly defined div inside of a div container and checking your process again to see if it triggers the whole page again - or trying to copy the code from a widget and seeing if that helps identify the issue

  • User Avatar
    0
    shridhar.mole created

    So I have below div on my html page

    <div [busyIf]="loading">
                        <div class="row align-items-center" *ngIf="excelData">
                            <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                                [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                                (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                                (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                                [customizeColumns]="customizeColumns">
                                <dxo-sorting mode="none">
                                </dxo-sorting>
                                <dxi-column dataField="Name" caption="reportName" [width]="400">
                                </dxi-column>
                                <dxi-column dataField="GLCode" caption="GLCode">
                                </dxi-column>
                            </dx-tree-list>
                        </div>
</div>

    and here is my code

    loading: boolean = false;
  ngOnInit(): void {
    // this.spinnerService.show();
    this.loading = true;
    this.service.GetFinancialsIncomeStatementData(this.timePeriod).subscribe((data) => {      
      this.apiResult = data;
      this.excelData = JSON.parse(this.apiResult.result);
      this.reportName = this.excelData.Name;
      this.loading = false;
      // this.spinnerService.hide();
    });
    this.customizeColumns = this.customizeColumns.bind(this);
  }

    this will show spinner on my entire page, I want to show spinner only on the above div

  • User Avatar
    0
    smry created

    Can you try to reverse that order?

    Like this:

    <div class="row align-items-center" *ngIf="excelData">    
        <div [busyIf]="loading">
                            <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                            ...

    Also, I think the busy-if.directive.ts takes care of the spinnerService show/hide, I didnt need to add it to any of my custom components to get the loading spinner - I only used [busyIf]

  • User Avatar
    0
    shridhar.mole created

    I tried by doing reverse order as you said above but didn't work. Can you please check at your end and send me sample code. Because in my application there is lot of primeng-table where they used this [busyIf] but there also the spinner is showing on whole screen.

  • User Avatar
    0
    smry created

    Here is the code but I'm not sure how helpful it will be, its generally the same concept you have

    html:

    <div [busyIf]="!ContentLoaded">
    <span>
       <app-mycomponent></app-mycomponent>
    </span>
</div>

    ts:

      ContentLoaded = false;


    constructor(
        injector: Injector,
    ) {
        super(injector);
    }

    ngOnInit(): void {
    }

    myLoadingMethod($event) {
        this.ContentLoaded = $event;
    }
}

    that component was a visual div in tab on a modal

    <tab heading="{{'Content' | localize}}">
          <div class="tab-class" *ngIf="active">
          <content-loaded-area></content-loaded-area>
        </div>
    </tab>

    The code you have should spin the div. From what you are describing its treating the whole area as the div. I would try cutting the entire area in 4 and add loading to just 1 to see how it reacts and maybe it will show you why its not reacting correctly Maybe even try adding a solid border around your div and seeing if its going past the area you expect it to be in

    <div [busyIf]="loading">
                        <div class="row align-items-center" *ngIf="excelData">
                            <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                                itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                                [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                                (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                                (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                                [customizeColumns]="customizeColumns">
                                <dxo-sorting mode="none">
                                </dxo-sorting>
                                <dxi-column dataField="Name" caption="reportName" [width]="400">
                                </dxi-column>
                                <dxi-column dataField="GLCode" caption="GLCode">
                                </dxi-column>
                            </dx-tree-list>
                        </div>
</div>
<div class="div-green">box 2</div>
<div class="div-red">box 3</div>
<div class="div-blue">box 4</div>


........
div-green {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
div-red {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid red;
  padding: 50px;
  margin: 20px;
}
div-blue {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid blue;
  padding: 50px;
  margin: 20px;
}
  • User Avatar
    0
    shridhar.mole created

    Below is my whole HTML page :

    <div [@routerTransition]>
    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">

        <div class="kt-subheader kt-grid__item">
            <div [class]="containerClass">
                <div class="kt-subheader__main">
                    <h3 class="kt-subheader__title">
                        <span>{{"FinancialStatements" | localize}}</span>
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{"FinancialStatementsHeaderInfo" | localize}}
                    </span>
                </div>
            </div>
        </div>

        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet">
                <div class="kt-portlet__body" [busyIf]="loading">
                    <div class="kt-form">
                        <form>
                            <div class="form-body">

                                <div class="row mb-4">
                                    <div class="col-xl-4" style="display: flex;align-self: center;">
                                        <label for="StatementTypeDropdown"
                                            style="align-self: center;font-weight: 600;">{{'FinancialStatements' | localize}}</label>
                                        <select id="StatementType" name="StatementType"
                                            style="display: flex;width: inherit;margin-left: 9.25px;width: 200px;"
                                            class="form-control">
                                            <option value="">{{"IncomeStatement" | localize}}</option>
                                            <option value="false">{{"P&LStatement" | localize}}</option>
                                            <option value="true">{{"BudgetStatement" | localize}}</option>
                                        </select>
                                    </div>
                                    <!-- <div class="col-xl-2" style="align-self: center;">
                                        <label class="kt-checkbox">
                                            <input class="form-control" type="checkbox" name="showStatistics"
                                                value="true" />{{"ShowStatistics" | localize}}
                                            <span></span>
                                        </label>
                                    </div> -->
                                    <div class="col-xl-4" style="display: flex;align-self: center;">
                                        <label for="TimePeriodDropdown"
                                            style="align-self: center;">{{'TimePeriod' | localize}}</label>
                                        <select id="TimePeriod" name="TimePeriod" (change)='onTimePeriodChange($event)'
                                            style="display: flex;width: inherit;margin-left: 9.25px;width: 150px;"
                                            class="form-control">
                                            <option value="Yearly">{{"Annual" | localize}}</option>
                                            <option value="Quarterly">{{"Quarterly" | localize}}</option>
                                            <option value="Monthly">{{"Monthly" | localize}}</option>
                                        </select>
                                        <button type="button" class="btn btn-brand1 btn-icon btn-filter"
                                            (click)="openChangeSettingsModal()" style="margin-left: 30px;"><i
                                                class="fa fa-cog" style="color: black;width: 3rem"></i></button>
                                    </div>
                                    <div class="col-xl-4" style="text-align: right;">
                                        <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                class="flaticon-refresh" (click)="refresh()"
                                                style="color: black;"></i></button>
                                        <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                class="fa fa-print" style="color: black;"></i></button>
                                        <!-- <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                class="fa fa-cog" style="color: black;"></i></button> -->
                                        <button type="button" class="btn btn-brand1 btn-icon btn-filter"><i
                                                class="flaticon-download" style="color: black;"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- <div class="row align-items-center">
                        <dx-tree-list id="testDatas" [dataSource]="testDatas" itemsExpr="items" dataStructure="tree"
                            [showRowLines]="true" [showBorders]="true" [columnAutoWidth]="true"
                            (onRowPrepared)="onRowUpdated($event)" (onRowExpanding)="onRowExpanding1($event)"
                            (onRowCollapsing)="onRowCollapsing1($event)">
                            <dxi-column dataField="Full_Name" caption="Category" cellTemplate="testTemplate">
                            </dxi-column>
                            <dxi-column dataField="Amount" caption="Jan 2020"></dxi-column>
                            <div *dxTemplate="let options of 'testTemplate'">
                                <span *ngIf="options.data.visible"
                                    style="color: blue;">{{options.data.Full_Name}}</span>
                                <span *ngIf="!options.data.visible">{{options.data.Full_Name}}</span>
                            </div>
                        </dx-tree-list>
                    </div> -->

                    <div class="row align-items-center" *ngIf="excelData">
                        <dx-tree-list id="excelData" class="excelData" [dataSource]="excelData.Children"
                            itemsExpr="Children" dataStructure="tree" [showRowLines]="true" [showBorders]="true"
                            [allowColumnResizing]="true" [columnMinWidth]="100" [columnAutoWidth]="true"
                            (onRowPrepared)="onRowUpdated($event)" (onCellPrepared)="onCellPrepared($event)"
                            (onRowExpanding)="onRowExpanding($event)" (onRowCollapsing)="onRowCollapsing($event)"
                            [customizeColumns]="customizeColumns">
                            <dxo-sorting mode="none">
                            </dxo-sorting>
                            <dxi-column dataField="Name" caption="reportName" [width]="400">
                            </dxi-column>
                            <dxi-column dataField="GLCode" caption="GLCode">
                            </dxi-column>
                        </dx-tree-list>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<reportSettingsModal #reportSettingsModal></reportSettingsModal>

    help me now to show the spinner on this Div which has class=kt-portlet__body, above code shows spinner but it covers the whole page like sidemenu bar,header etc

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @shridhar.mole

    Could you rename the boolen field from loading to something else and try again ? If you can't solve the problem, can you send your project to [email protected] ?

    Thanks,

  • User Avatar
    0
    ipservant created

    Hi, Has this ever been solved? I'm having the same issue here (still on Zero 8.4) with entities generated by the Power Tool. Curious thing is that the spinner loads correctly on some divs, like here around the quick filter input:

                                        <div class="form-group m-form__group align-items-center" [busyIf]="test">
                                        <div class="input-group">
                                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
                                            <div class="input-group-append">
                                                <button (click)="setFilter()" class="btn btn-outline-primary blue" type="submit"><i class="fa fa-search"></i>{{l("Search")}}</button>
                                            </div>
                                        </div>
                                    </div>

    ...but not e.g. in the Primeng datatable's div <div class="primeng-datatable-container col-12" [busyIf]="test"> - then it appears fullscreen. Any idea what to look at and how to solve that?

    Thank you!

  • User Avatar
    0
    ipservant created

    I think I found the answer here https://github.com/Napster2210/ngx-spinner/issues/74 - the parent div needs to have relative position property set!

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks a lot @ips-ad :)

Assignee
No one
Labels
Non yet