Preloader should have properly set opacity when the grid is loading. Resolves #2205

Author: yordanov

Radzen.Blazor/themes/_css-variables.scss

@@ -583,6 +583,7 @@
   --rz-grid-detail-template-background-color: #{$grid-detail-template-background-color};
   --rz-grid-loading-indicator-color: #{$grid-loading-indicator-color};
   --rz-grid-loading-indicator-background-color: #{$grid-loading-indicator-background-color};
+  --rz-grid-loading-indicator-background-opacity: #{$grid-loading-indicator-background-opacity};
   --rz-grid-frozen-cell-border: #{$grid-frozen-cell-border};
   --rz-grid-frozen-cell-background-color: #{$grid-frozen-cell-background-color};
   --rz-grid-state-transition: #{$grid-state-transition};

Radzen.Blazor/themes/components/blazor/_grid.scss

@@ -78,7 +78,8 @@ $grid-detail-template-border-radius: 0 !default;
 $grid-detail-template-padding: 0 !default;
 $grid-detail-template-background-color: var(--rz-base-background-color) !default;
 $grid-loading-indicator-color: currentColor !default;
-$grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5) !default;
+$grid-loading-indicator-background-color: var(--rz-base-600) !default;
+$grid-loading-indicator-background-opacity: 0.5 !default;
 $grid-frozen-cell-border: $grid-cell-border !default;
 $grid-frozen-cell-background-color: $grid-header-background-color !default;
 $grid-state-transition: var(--rz-transition-all) !default;
@@ -892,6 +893,7 @@ $column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default;
   position: absolute;
   inset: 0;
   background-color: var(--rz-grid-loading-indicator-background-color);
+  opacity: var(--rz-grid-loading-indicator-background-opacity);
   z-index: 2;
 }
 

Radzen.Blazor/themes/standard-base.scss

@@ -255,6 +255,7 @@ $grid-column-resizer-helper-background-color: var(--rz-primary) !default;
 $grid-detail-template-background-color: var(--rz-base-100) !default;
 $grid-loading-indicator-color: var(--rz-on-primary-lighter) !default;
 $grid-loading-indicator-background-color: var(--rz-primary-lighter) !default;
+$grid-loading-indicator-background-opacity: 1 !default;
 $column-drag-handle-color: var(--rz-text-disabled-color) !default;
 $column-drag-handle-hover-color: var(--rz-text-title-color) !default;
 

Radzen.Blazor/themes/standard-dark-base.scss

@@ -426,6 +426,7 @@ $grid-column-resizer-helper-background-color: var(--rz-primary) !default;
 $grid-detail-template-background-color: var(--rz-base-900) !default;
 $grid-loading-indicator-color: var(--rz-on-primary-lighter) !default;
 $grid-loading-indicator-background-color: var(--rz-primary-lighter) !default;
+$grid-loading-indicator-background-opacity: 1 !default;
 $column-drag-handle-color: var(--rz-text-disabled-color) !default;
 $column-drag-handle-hover-color: var(--rz-text-title-color) !default;
 

Radzen.Blazor/themes/standard-dark.scss

@@ -425,6 +425,7 @@ $grid-column-resizer-helper-background-color: var(--rz-primary) !default;
 $grid-detail-template-background-color: var(--rz-base-900) !default;
 $grid-loading-indicator-color: var(--rz-on-primary-lighter) !default;
 $grid-loading-indicator-background-color: var(--rz-primary-lighter) !default;
+$grid-loading-indicator-background-opacity: 1 !default;
 $column-drag-handle-color: var(--rz-text-disabled-color) !default;
 $column-drag-handle-hover-color: var(--rz-text-title-color) !default;
 

Radzen.Blazor/themes/standard.scss

@@ -257,6 +257,7 @@ $grid-column-resizer-helper-background-color: var(--rz-primary) !default;
 $grid-detail-template-background-color: var(--rz-base-100) !default;
 $grid-loading-indicator-color: var(--rz-on-primary-lighter) !default;
 $grid-loading-indicator-background-color: var(--rz-primary-lighter) !default;
+$grid-loading-indicator-background-opacity: 1 !default;
 $column-drag-handle-color: var(--rz-text-disabled-color) !default;
 $column-drag-handle-hover-color: var(--rz-text-title-color) !default;