LoadingIndicator always showing at the bottom

[JCQuirozL]

Describe the bug I have a Blazorise LoadingIndicator component wrapping a DataGrid, but no matter where I place it always shows at the bottom (I've tried to place it wrapping buttons, anda others components, even I've place it on top or bottom, with FullScreen attribute. In the code I've place a ChildContent, but I've tried it out without it too.

To Reproduce

<LoadingIndicator @ref=loadingIndicator FullScreen FadeIn>
    <ChildContent>
        @*search fields*@
        <div style="padding:2rem;" class="col-9">
            <div class="row">
                <div class="col-4">
                    <TextEdit Class="col-12 background" Placeholder="Número de póliza" Color="Colores.AzulBBVA" @bind-Text="@policyFilter"></TextEdit>
                </div>
                <div class="col-4">
                    <div class="row">
                        <div class="col-6">
                            <DatePicker Class="col-12 background" Placeholder="Fecha inicial" @bind-Date="@startDateFilter"></DatePicker>
                        </div>
                        @*</div>
                        <div class="col-3">*@
                        <div class="col-6">
                            <DatePicker Class="col-12 background" Placeholder="Fecha final" @bind-Date="@endDateFilter"></DatePicker>
                        </div>
                    </div>
                </div>

                <div class="col-4">
                    <Select text Class="col-12 background" TValue="int" @bind-SelectedValue="@validatedFilter">
                        <SelectItem TValue="int" Value=1>Validada</SelectItem>
                        <SelectItem TValue="int" Value=2>Por validar</SelectItem>
                        <SelectItem TValue="int" Value=0>Todas</SelectItem>
                    </Select>

                </div>
            </div>
        </div>

        @*Grid*@
        <Div Class="col-9">
            <Div Padding="Padding.Is3" Class="row">
                <Paragraph>A continuación se muestran las pólizas <strong>pendientes por validar.</strong></Paragraph>
            </Div>
        </Div>
        <DataGrid TItem="Data"
                  Data="@PoliciesList.Data"
                  @bind-SelectedRow="@selectedItem"
                  Sortable="false"
                  Editable
                  ShowPager
                  PageSize=7
                  Responsive="true"
                  EditMode="DataGridEditMode.Popup"
                  PopupTitleTemplate="@Title"
                  FixedHeader="true"
                  Resizable
                  Hoverable
                  CommandMode="DataGridCommandMode.Commands"
                  CustomFilter="@OnCustomFilter"
                  RowUpdated="@OnPolicyRowUpdated"
                  UseInternalEditing=true
                  DetailRowTrigger="@((e)=>e.Item.Policy == selectedItem?.Policy)"
                  SelectedRowStyling="@OnSelectedRowStyling"
                  RowStyling="@OnRowStyling" Style="margin-bottom: 0 !important">
            @*<ButtonRowTemplate>
            <Button Color="Colores.AzulBBVA" Disabled="(selectedItem.Validated)" Clicked="context.EditCommand.Clicked">Editar</Button>
            <Button Color="Color.Secondary" Disabled="(selectedItem is null)" Clicked="@ShowDetailsModal">Detalle</Button>
            </ButtonRowTemplate>*@
            <DataGridColumns>
                <DataGridColumn TItem="Data" Field="@nameof(Data.Policy)" Caption="PÓLIZA" />
                <DataGridColumn TItem="Data" Field="Clipert.TotalPremium" Caption="PRIMA TOTAL" DisplayFormat="{0:C2}"
                                DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("en-US",false).NumberFormat" />
                <DataGridColumn TItem="Data" Field="Leasing.PaymentFolio" Caption="FOLIO PAGO" Editable="true" />
                <DataGridColumn TItem="Data" Field="Leasing.Bank" Caption="BANCO" Editable="true" Width="200px" />
                <DataGridColumn TItem="Data" Field="Leasing.AccountNumber" Caption="CUENTA" Editable="true" />
                <DataGridColumn TItem="Data" Field="Leasing.DocumentDate" Caption="FECHA DEPÓSITO" Editable="true" />
                <DataGridColumn TItem="Data" Field="Leasing.DepositAmount" Caption="IMPORTE" Editable="true" DisplayFormat="{0:C}"
                                DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("en-US",false).NumberFormat" />
                <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Data" Field="Leasing.ReferenceId" Caption="REFERENCIA" Editable="true" />
                <DataGridColumn TItem="Data" Field="Clipert.SendingDateASE" Caption="FECHA EMISIÓN" />

                <DataGridCheckColumn TItem="Data" Field="@nameof(Data.Validated)" Caption="VALIDADA" Editable="true">
                    <DisplayTemplate>
                        <Check TValue="Boolean" Checked="@context.Validated" CheckedChanged="@OnCheckedChange"
                               Disabled="@context.Validated" Background="Background.Secondary" />
                    </DisplayTemplate>
                </DataGridCheckColumn>
                <DataGridColumn TItem="Data" Field="@nameof(Data.UpdateDate)" Caption="ÚLTIMA MODIF." />
                <DataGridColumn TItem="Data">
                    <DisplayTemplate>
                        <Tooltip Text="Mostrar/Añadir comentarios" Placement="TooltipPlacement.Top">
                            <Icon Name="IconName.Comments" IconSize="IconSize.Default" Clicked="@ShowCommentsModal"></Icon>
                        </Tooltip>
                        @*<Botones Color="Colores.AzulBBVA" Size="Size.ExtraSmall" Clicked="@ShowCommentsModal">Ver</Botones>*@
                    </DisplayTemplate>
                </DataGridColumn>
                <DataGridCommandColumn NewCommandAllowed="false" DeleteCommandAllowed="false">
                    <SaveCommandTemplate>
                        <Button ElementId="btnSave" Type="ButtonType.Submit" PreventDefaultOnSubmit Color="Color.Primary"
                                Clicked="@context.Clicked" Size="Size.Small">
                            Guardar
                        </Button>
                    </SaveCommandTemplate>
                    <CancelCommandTemplate>
                        <Button ElementId="btnCancel" Color="Color.Secondary" Clicked="@context.Clicked" Size="Size.Small">Cancelar</Button>
                    </CancelCommandTemplate>
                    <EditCommandTemplate>
                        <Tooltip Fade Text="Modificar datos de póliza" Placement="TooltipPlacement.Top">
                            <Button hidden="@context.Item.Validated" Size="Size.Small" Shadow="Shadow.Remove"
                                    Outline
                                    Clicked="@context.Clicked">
                                <Icon Name="IconName.Pen" IconStyle="IconStyle.DuoTone" IconSize="IconSize.ExtraSmall"></Icon>
                            </Button>
                        </Tooltip>
                        @*<Button Color="Colores.AzulBBVA" Size="Size.ExtraSmall" Clicked="@context.Clicked">Editar</Button>*@
                    </EditCommandTemplate>
                </DataGridCommandColumn>

            </DataGridColumns>

            <DetailRowTemplate>
                <div class="container" style="background-color: #F1F1F1;">
                    <div class="row" style="align-items: end !important;">
                        <div class="col-3">
                            <Field Padding="Padding.Is1">
                                <FieldLabel TextWeight="TextWeight.Bold">Certificado: </FieldLabel>
                                <Text TextWeight="TextWeight.Bold">@context.Clipert.Certificate</Text>
                            </Field>
                        </div>
                        <div class="col-3">
                            <Field Padding="Padding.Is1">
                                <FieldLabel TextWeight="TextWeight.Bold">Factura: </FieldLabel>
                                <Text TextWeight="TextWeight.Bold">@context.Clipert.Invoice</Text>
                            </Field>
                        </div>
                        <div class="col-3">
                            <Field Padding="Padding.Is1">
                                <FieldLabel TextWeight="TextWeight.Bold">Fecha de emisión: </FieldLabel>
                                <Text TextWeight="TextWeight.Bold">@context.Clipert.SendingDateASE</Text>
                            </Field>
                        </div>
                        <div class="col-3">
                            <Field Padding="Padding.Is1">
                                <FieldLabel TextWeight="TextWeight.Bold">Centro emisor: </FieldLabel>
                                <Text TextWeight="TextWeight.Bold">@context.Clipert.EmmiterCenter</Text>
                            </Field>
                        </div>
                    </div>
                </div>
            </DetailRowTemplate>

        </DataGrid>

        @*modal comments*@
        <Modal @ref="commentsModalRef">
            <ModalContent Size="ModalSize.Large">
                <ModalHeader>
                    <ModalTitle>Comentarios</ModalTitle>
                    @*<CloseButton />*@
                </ModalHeader>
                <ModalBody>
                    <DataGrid TItem="PolicyCommentVM"
                              Data="@selectedItem.Comments"
                              ShowPager
                              PageSize="8"
                              Responsive
                              FixedHeader
                              Hoverable
                              Editable
                              CommandMode="DataGridCommandMode.ButtonRow"
                              EditMode="DataGridEditMode.Form"
                              @bind-SelectedRow="@selectedComment"
                              SelectedRowStyling="@OnSelectedRowStylingComments"
                              RowStyling="@OnRowStylingComments"
                              RowInserted="@OnCommentRowInserted">
                        <DataGridColumns>
                            <DataGridColumn TItem="PolicyCommentVM" Field="@nameof(PolicyCommentVM.Comment)" Caption="Comentario" Editable />
                            <DataGridColumn TItem="PolicyCommentVM" Field="@nameof(PolicyCommentVM.User)" Caption="Usuario" />
                            <DataGridColumn TItem="PolicyCommentVM" Field="@nameof(PolicyCommentVM.CommentDate)" Caption="Fecha" />
                            <DataGridColumn TItem="PolicyCommentVM" Field="@nameof(PolicyCommentVM.CommentType)" Caption="Tipo" />
                            <DataGridCommandColumn NewCommandAllowed="false" EditCommandAllowed="false" DeleteCommandAllowed="false">
                                <SaveCommandTemplate>
                                    <Button ElementId="btnSave" Type="ButtonType.Submit" PreventDefaultOnSubmit Color="Colores.AzulBBVA"
                                            Clicked="@context.Clicked">
                                        Guardar
                                    </Button>
                                </SaveCommandTemplate>
                                <CancelCommandTemplate>
                                    <Button ElementId="btnCancel" Color="Color.Secondary" Clicked="@context.Clicked">Cancelar</Button>
                                </CancelCommandTemplate>
                            </DataGridCommandColumn>
                        </DataGridColumns>
                        <ButtonRowTemplate>
                            <Button Color="Colores.AzulBBVA" Disabled="selectedItem.Validated" Clicked="context.NewCommand.Clicked">Nuevo</Button>
                            <Button Color="Color.Secondary" Clicked="@CloseCommentsModal">Cerrar</Button>
                        </ButtonRowTemplate>
                    </DataGrid>
                </ModalBody>
            </ModalContent>
        </Modal>

       Snackbar's'*@
        <Snackbar @ref="successSnackBar" Color="SnackbarColor.Info">
            <SnackbarBody Style="text-align: center; font-size: 15px; font-weight: 600;">
                Póliza @selectedItem.Policy editada correctamente 
                <SnackbarAction Clicked="@(()=>successSnackBar.Hide())"></SnackbarAction>
            </SnackbarBody>
        </Snackbar>
        <Snackbar @ref="errorSnackBar" Color="SnackbarColor.Danger">
            <SnackbarBody Style="text-align: center; font-size: 20px; font-weight: 600;">
                Ha ocurrido un error validando la información de la póliza @selectedItem.Policy
                <SnackbarAction Clicked="@(()=>errorSnackBar.Hide())"></SnackbarAction>
            </SnackbarBody>
        </Snackbar>

    </ChildContent>
</LoadingIndicator>

Expected behavior Tho show LoadingIndicator in the center and FullScreen

Screenshots

Aditional context I'm kind of new in Blazor and Blazorise, and I always try to read the official documentation before posting an issue.

Thanks in advance for the help.

[stsrki]

DataGrid has a LoadingTemplate template that you can use to place anything inside to show the progress. An example can be seen at https://blazorise.com/docs/extensions/datagrid/templates

I haven't tried it but in theory, placing a LoadingIndicator inside of LoadingTemplate should work.

[stsrki]

@glutio Do you have any advice?

[glutio]

Does it work with other components? This feels like css is not loading but maybe something else. I'm away from my computer for the rest of the week but I will take a look at it on Saturday. Thanks!

[JCQuirozL]

Does it work with other components? This feels like css is not loading but maybe something else. I'm away from my computer for the rest of the week but I will take a look at it on Saturday. Thanks!

Nope, as I said, I have placed it wrapping buttons, modals, or other and it's the same behavior

[JCQuirozL]

DataGrid has a LoadingTemplate template that you can use to place anything inside to show the progress. An example can be seen at https://blazorise.com/docs/extensions/datagrid/templates

I haven't tried it but in theory, placing a LoadingIndicator inside of LoadingTemplate should work.

I tried this, but now it raises the error: 'The render handle is not yet assigned.'

[glutio]

Nope, as I said, I have placed it wrapping buttons, modals, or other and it's the same behavior

This looks like you did not include loading indicator css in your project. Or if you did you may have indicated wrong version. Or otherwise somehow css is not loading. See docs and Blazorise Demo project for sample of how to include css. Although, I suspect you did include the css if you followed the doc but make sure it is actually loaded (included in the right location etc)

[JCQuirozL]

Nope, as I said, I have placed it wrapping buttons, modals, or other and it's the same behavior

This looks like you did not include loading indicator css in your project. Or if you did you may have indicated wrong version. Or otherwise somehow css is not loading. See docs and Blazorise Demo project for sample of how to include css. Although, I suspect you did include the css if you followed the doc but make sure it is actually loaded (included in the right location etc)

You were so right, I don't know how could I forget something so obvious, I just added the css in the index.html and it worked as I wanted, this so silly, sorry guys, and Thanks a lot again