SfPopup slows down page display

[alberk8]

I have a few popups declared in a content page and this is slowing down the page to navigate to (1-1.5 seconds lag) even if the page does not have any data to load. Is there a way to speed this up?

<ContentPage.Resources>
    <popup:SfPopup x:Name="popup"  x:Key="popup"  HeaderTitle=""
            ShowFooter="True" HeightRequest="250" WidthRequest="500"  
            ShowCloseButton="False" AppearanceMode="TwoButton"
            AcceptButtonText="Ok"  
            AcceptCommand="{Binding PopupAcceptCommand}"
            DeclineButtonText="Cancel"
            DeclineCommand="{Binding PopupDeclineCommand}"
            Closed="OnClicked_Closed" >
        <popup:SfPopup.ContentTemplate >
            <DataTemplate x:DataType="local:AccountsViewModel">
                <Grid RowDefinitions="Auto,*">
                    <Label Grid.Row="0" Text="Provider OTP" HorizontalOptions="Center" FontAttributes="Bold" FontSize="16" Margin="{OnPlatform Default='14,0,0,0',Android='11,0,0,0',iOS='11,0,0,0'}"/>
                    <otpInput:SfOtpInput Grid.Row="1" HorizontalOptions="Center"
                              Value="{Binding Otp}"
                              AutoFocus="True"
                              Type="Number"
                              Length="6"
                              StylingMode="Outlined"
                              InputState="Default"/>        
                </Grid>
            </DataTemplate>
        </popup:SfPopup.ContentTemplate>
    </popup:SfPopup>

    <popup:SfPopup x:Name="popupError" x:Key="popupError" HeaderHeight="0" FooterHeight="0" ShowCloseButton="True" >
        <popup:SfPopup.ContentTemplate>
            <DataTemplate>
                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <Label Text="You need to key in 6 digit OTP"></Label>
                </VerticalStackLayout>
            </DataTemplate>
        </popup:SfPopup.ContentTemplate>
    </popup:SfPopup>

    <popup:SfPopup x:Name="popupDelete" x:Key="popupDelete" HeaderHeight="0"  
                    ShowFooter="True"  
                    ShowCloseButton="True"
                    AppearanceMode="TwoButton"
                    AcceptButtonText="Yes"  
                    AcceptCommand="{Binding DeleteAcceptCommand}"
                    DeclineButtonText="No"> 
        <popup:SfPopup.ContentTemplate>
            <DataTemplate>
                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <Label Text="Are You sure you want to delete this account?"></Label>
                </VerticalStackLayout>
            </DataTemplate>
        </popup:SfPopup.ContentTemplate>
    </popup:SfPopup>

</ContentPage.Resources>

[AmalRajUmapathySelvam]

We have reviewed your reported issue and tested it using a simplified sample based on the code snippet you provided. During our investigation, we did not observe any performance degradation or page slowdown caused by SfPopup during navigation. This behavior was verified across all supported platforms.

Additionally, we would like to clarify that when navigating to a page containing multiple SfPopup instances, all child elements associated with each popup are initialized as part of the page lifecycle. We suspect this may be contributing to page slowdown, especially when multiple popups are declared.

As a recommended workaround, we suggest reusing a single SfPopup instance and dynamically updating its ContentTemplate, header, popup configuration, and commands based on the context. This approach reduces initialization overhead and improves performance during navigation.

We have also attached a sample implementation that demonstrates how to reuse a single popup with dynamic content and customization.

PopupPerformance 2.zip

If you continue to experience the issue, could you please share a video reference along with details about the platform (iOS, Android, Windows, etc.) where the slowdown occurs? This information will help us validate the behavior more thoroughly and provide targeted assistance.

[alberk8]

Thanks for the prompt reply. Will try the sample you have provided.

[alberk8]

I have issues with the following with SfOtpInput Value assignment. The value is assigned to a INotifyPropertyChanged and the value is always empty string ( "" ). Is this a bug? If the binding is set in the Xaml as my original code above, it works.

 [ObservableProperty]
 public partial string Otp { get; set; } = string.Empty;

public void ShowOtpPopup()
{
    PopupHeader = string.Empty;
    PopupWidth = 330;
    PopupHeight = 230;
    PopupShowHeader = false;
    PopupShowFooter = true;

    var grid = new Grid
    {
        Margin = new Thickness() { Top = 60, Left = 0, Bottom = 0, Right = 0 },
        RowDefinitions = new RowDefinitionCollection
        {
            new RowDefinition { Height = GridLength.Auto },
            new RowDefinition { Height = GridLength.Star }
        }
    };

    var headerLabel = new Label
    {
        Text = "Provider OTP",
        FontAttributes = FontAttributes.Bold,
        FontSize = 16,
        HorizontalOptions = LayoutOptions.Center,
        Margin = new Thickness(14, 0, 0, 0)
    };

  
    var otpInput = new SfOtpInput()
    {
        
        Value = Otp,
        AutoFocus = true,
        Type = OtpInputType.Number,
        Length = 6,
        StylingMode = OtpInputStyle.Outlined,
        InputState =  OtpInputState.Default,
        HorizontalOptions = LayoutOptions.Center,
         
    };

    Grid.SetRow(otpInput, 1);

    grid.Children.Add(headerLabel);
    grid.Children.Add(otpInput);
  
  PopupContent = grid;
}

[alberk8]

Answering my own question. I need to add the binding manually.

var otpInput = new SfOtpInput()
    {
        AutoFocus = true,
        Type = OtpInputType.Number,
        Length = 6,
        StylingMode = OtpInputStyle.Outlined,
        InputState =  OtpInputState.Default,
        HorizontalOptions = LayoutOptions.Center,
         
    };
 otpInput.SetBinding(SfOtpInput.ValueProperty, nameof(Otp));