Ngx-datatable: Cannot get loading indicator to appear

[ScottSpittle]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Angular 4.x and 9.3.1, I copy and paste the example code as to be sure it is IDENTICAL and I am not missing anything, yet the loading bar indicator does not appear.

Expected behavior
Loading indicator would appear while loading

Reproduction of the problem
http://plnkr.co/edit/ct5UDsOOkoTmw3RzihCG?p=preview

What is the motivation / use case for changing the behavior?
I would like a loading indicator :D

Please tell us about your environment:
phpstorm@latest

• Table version: 0.8.x
  9.3.1

• Angular version: 2.0.x
  4.3.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome: Version 59.0.3071.115 (Official Build) (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript

[BrummbQ]

You need to include the material css theme or style your own loading indicator. It's working fine for me.

[wizarrc]

@ScottSpittle I agree with @BrummbQ. Do you have a plunker where it's not working giving the proper styling? The datatable was moved to css-less design. it's up to you to add a style or use the provided but separately added ones.

[MattMorrisDev]

Just a heads up, if you also include bootstrap css in your project, that might be the reason. Since the material loading indicator html looks like this:

<div class="progress-linear" role="progressbar">
      <div class="container">
        <div class="bar"></div>
      </div>
 </div>

The container class applies a bunch of a bootstrap styling that made it disappear for me.

[MattMorrisDev]

Actually, after further investigation, the bootstrap styling only messes with the width of the loader, it doesn't hide it.

I found what is hiding it though. There's a position: relative and a position: absolute on this css class seen in the image below. When I uncheck the absolute rule, it suddenly shows up again.

[tmfulton]

@MattMorrisDev How did you fix the issue of it hiding? Just remove bootstrap, or did you find another solution?

Thanks!

[MattMorrisDev]

In the component that hosts the <nxg-datable>, I basically added this scss:

::ng-deep {
  .progress-linear {
    position: relative !important;

    .container {
      max-width: 100% !important;
    }
  }
}

[Dekeyras]

Hi,

Is there any update on this issue. The above solution does not work in the latest version of angular. The component type does not apply to child components.

I have bootstrap styles imported to.

Thanks

[mgendre]

Same problem here with bootstrap the progress bar doesn't show.

[byhoratiss]

@mgendre With bootstrap there is no progress bar css styles included, but this will give you a hint:

.ngx-datatable.bootstrap .datatable-body .progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  -webkit-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
  background-color: #aad1f9;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}
/**
 * Progress bar animations
 */
 @keyframes query {
  0% {
    opacity: 1;
    transform: translateX(35%) scale(0.3, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0, 1);
  }
}

[josemadev]

In bootstrap theme not include css for the progress bar. I make a scss for that based in @byhoratiss

` .ngx-datatable.bootstrap .datatable-body .progress-linear {
display: block;
position: relative;
width: 100%;
height: 5px;
padding: 0;
margin: 0;
position: absolute;

.container {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 5px;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1);
background-color: #aad1f9;
margin: 0;
max-width: 100%;

.bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}

}
}
``

[haifahrul]

@mgendre With bootstrap there is no progress bar css styles included, but this will give you a hint:

.ngx-datatable.bootstrap .datatable-body .progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  -webkit-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
  background-color: #aad1f9;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}
/**
 * Progress bar animations
 */
 @keyframes query {
  0% {
    opacity: 1;
    transform: translateX(35%) scale(0.3, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0, 1);
  }
}

It's worked for me,

and i added this code into my scss/css

::ng-deep {
  .progress-linear {
    position: relative !important;

    .container {
      max-width: 100% !important;
    }
  }
}

Thanks :smile: