C#•3w ago

Delay While Page Loading

while navigation from one page to another is taking so much delay why here i have attached the three Document and one video in Basci text i have the App.cs And Mauiprogram.cs all the This in Pos View Text i have pos View All This in Pos Viewmodel I have pos view model

Bacis.txt

PosView.txt

Posviewmodel.txt

44 Replies

leowest•3w ago

can you repost those files to the below $paste link discord is awful for reading code

MODiX•3w ago

If your code is too long, you can post to https://paste.mod.gg/, save, and copy the link into chat for others to see your shared code!

leowest•3w ago

or if u have a github with your project that would be ideal

Murali•3w ago

https://paste.mod.gg/

BlazeBin

A tool for sharing your source code with the world!

leowest•3w ago

u have to click save on the top left so it produces the right url to copy paste

Murali•3w ago

https://paste.mod.gg/zthsoqrugcff/2

BlazeBin - zthsoqrugcff

A tool for sharing your source code with the world!

Murali•3w ago

How Check i have give app shell and PosView and PosViewModel But While Navigation Takeing Very very Slow i Thinks Because using So Many Collection View No For Pos Page it happing Every Page

leowest•3w ago

I can see many red flags as to why it could be slow, so I will list a few here: 1) your Pos.xaml is massive you have almost 2k lines of XAML stuck in a single file. You could potentially split that in multiple ContentPage make it more organized and reusable 2) loading things inside the constructor will lock your app you do not want to have logic that does not belong in the constructor in it. specially logic about loading things. If you need to load things do so in the proper event i.e.: wrap the view Load event into the vm something like: In Pos.xaml.cs you would have say:

public PosViewModel PosViewModel => (PosViewModel)BindingContext!;

public PosViewModel PosViewModel => (PosViewModel)BindingContext!;

Inside the Pos.xaml.cs constructor u would wire the event after setting the BindingContext:

Loaded += MainPage_Loaded;

Loaded += MainPage_Loaded;

And then you wire it to the vm like so

private async void MainPage_Loaded(object? sender, EventArgs e)
{
    await PosViewModel.Load();
}

private async void MainPage_Loaded(object? sender, EventArgs e)
{
    await PosViewModel.Load();
}

The above would call a method in your PosViewModel you can use to load things async without locking your ui. And the main root of your problems is most likely your PosViewModel constructor its doing so many shit locking the entire ui there is no async what so ever as well all the database stuff you should create a service for it and decouple it from your view model you're not taking advantager of DI which comes out of the box with MAUI

Murali•3w ago

Okay Thanks I will Try

leowest•3w ago

all in all your PosViewModel is a massive mass you need to work that out

leowest•3w ago

you can take a look at this for some ideas on how to better organize things https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/puttingthingstogether

Putting things together - Community Toolkits for .NET

An overview of how to combine different features of the MVVM Toolkit into a practical example

leowest•3w ago

there is also this maui specific example https://github.com/dotnet/maui-samples/tree/main/8.0/WebServices/TodoREST

GitHub

maui-samples/8.0/WebServices/TodoREST at main · dotnet/maui-samples

Samples for .NET Multi-Platform App UI (.NET MAUI) - dotnet/maui-samples

Murali•3w ago

Thanks Bro very much you know how to make filp the login form

leowest•3w ago

also you have a load of queries using SELECT * FROM if you only need 2 columns or not all the columns u should make specific queries what is flip the login form? animation?

Murali•3w ago

https://codepen.io/eminqasimov/pen/zXJVzJ

Emin Gasimoff

CodePen

...

Murali•3w ago

this like in desktop application in the center when i click the but that shoud be flip i want to creat same

leowest•3w ago

I dont understand what "flip" is here sorry 😦 ah u mean this wait

Murali•3w ago

i want to Creat login and Register form i want to creat like this

leowest•3w ago

sure you can do that in maui

Murali•3w ago

How

leowest•3w ago

https://github.com/Jon2G/MAUI-FlipView

GitHub

GitHub - Jon2G/MAUI-FlipView: A ContentView with a customizable fli...

A ContentView with a customizable flip animation for MAUI - Jon2G/MAUI-FlipView

leowest•3w ago

there is an example in this github is not very simple

leowest•3w ago

maui also have https://learn.microsoft.com/en-us/dotnet/maui/user-interface/animation/custom?view=net-maui-8.0

Custom animation - .NET MAUI

The .NET MAUI Animation class can create and cancel animations, synchronize multiple animations, and create custom animations that animate properties that aren't animated by existing animation methods.

leowest•3w ago

which u can probably come up with something that would give u the same feel of the flipping pages

leowest•3w ago

there is also this library which have premade animations u can use https://github.com/jsuarezruiz/AlohaKit.Animations

GitHub

GitHub - jsuarezruiz/AlohaKit.Animations: AlohaKit.Animations is a ...

AlohaKit.Animations is a library designed for .NET MAUI that aims to facilitate the use of animations to developers. - jsuarezruiz/AlohaKit.Animations

Murali•3w ago

Amazing Bro

leowest•3w ago

https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations.gif

Murali•3w ago

Can One Again Doubt You Make this

leowest•3w ago

no that is from the last link

Murali•3w ago

Okay

leowest•3w ago

I dont usually do animations unless im required to they take a lot of time to get right and look nice

Murali•3w ago

While My Application As Full Screen I Want to Like Toast in Bootstrap but i used maui Tost is Going Backside of my screen i want to creat like bootstrap how

Murali•3w ago

Like This

Murali•3w ago

Can We Creat A Application Like The Header Is Fixed That Content Should Chage We Can Able to do like that this Another Doubt

leowest•3w ago

maui communitytoolkit toasts u can select where they show up https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Pages/Alerts/ToastPage.xaml.cs

GitHub

Maui/samples/CommunityToolkit.Maui.Sample/Pages/Alerts/ToastPage.xa...

The .NET MAUI Community Toolkit is a community-created library that contains .NET MAUI Extensions, Advanced UI/UX Controls, and Behaviors to help make your life as a .NET MAUI developer easier - Co...

leowest•3w ago

there are some example there on how to do it sorry can u provide an example? because you can create your own header however you like

Murali•2w ago

this i creat the Header <Grid>  <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" />  <ColumnDefinition Width="" />  </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/>  <RowDefinition Height=""/>  </Grid.RowDefinitions>  <HorizontalStackLayout Grid.Row="0" Grid.ColumnSpan="2" BackgroundColor="Gray" Padding="10"> <Button Text="Dashboard" Command="{Binding ChangeTabCommand}" CommandParameter="Dashboard" /> <Button Text="POS" Command="{Binding ChangeTabCommand}" CommandParameter="POS" /> <Button Text="Table" Command="{Binding ChangeTabCommand}" CommandParameter="Table" /> <Button Text="Settings" Command="{Binding ChangeTabCommand}" CommandParameter="Settings" /> <Button Text="Logout" Command="{Binding ChangeTabCommand}" CommandParameter="Logout" /> </HorizontalStackLayout>   <ContentView Grid.Row="1" BackgroundColor="Red" Grid.Column="1" Content="{Binding CurrentPage}">  </ContentView> </Grid> can change the contenpage down

leowest•2w ago

what is the problem here u wanted the menu in the header where it says Home?

Murali•2w ago

No i creat the new project to Set The Hearder Stay Just Content Page should change I Try This But Also Came This

leowest•2w ago

I am sorry @Murali but its really hard to understand what you're trying to say

Murali•2w ago

Bro, I made the pos view as you suggested, but it's still taking a delay.

leowest•2w ago

post code show how u changed it you need to make that whole loading block async and only at the end fill the observablecollection you cannot add items 1 by 1 to the observablecollection otherwise it will make things slow as well just looking at your code, there is so many things u need to fix Like why is the login process inside the constructor? WHy is it not in a service that a command for a login button executes that then navigates to another page this is just a rough example to give you an idea, UserService.cs

public class UserService
{
    private readonly Database _db;
    public UserService(Database db)
    {
        _db = db;
    }

    public Task<bool> Authenticate(string username, string password)
    {
        var user = await _db.Users.FirstOrDefaultAsync(x => x.Username == username && x.Password == password);
        return user is not null;
    }

    public Task<List<UserDto>> GetUsers()
    {
        return await _db.Users.Select(x => x.ToDto()).ToListAsync();
    }
}

public class UserService
{
    private readonly Database _db;
    public UserService(Database db)
    {
        _db = db;
    }

    public Task<bool> Authenticate(string username, string password)
    {
        var user = await _db.Users.FirstOrDefaultAsync(x => x.Username == username && x.Password == password);
        return user is not null;
    }

    public Task<List<UserDto>> GetUsers()
    {
        return await _db.Users.Select(x => x.ToDto()).ToListAsync();
    }
}

LoginViewModel.cs

public LoginViewModel : BaseViewModel
{
    public readonly UserService _userService;
    public LoginViewModel(UserService userService)
    {
        _userService = userService;
    }

    [RelayCommand]
    public async Task Login(string username, string password)
    {
        var isAuthenticated = await _userService.Authenticate(username, password);
        if (isAuthenticated)
        {
            // navigate to another page
        }
        // display some error message...
    }
}

public LoginViewModel : BaseViewModel
{
    public readonly UserService _userService;
    public LoginViewModel(UserService userService)
    {
        _userService = userService;
    }

    [RelayCommand]
    public async Task Login(string username, string password)
    {
        var isAuthenticated = await _userService.Authenticate(username, password);
        if (isAuthenticated)
        {
            // navigate to another page
        }
        // display some error message...
    }
}

so if u need to display all users, you would, something like this for example

public ObservableCollection<UserViewModel> Users {get;set;} = [];
public async Task Load()
{
    Users = new ObservableCollection<UserViewModel>(await _userService.GetUsers().ToUserViewModel());
}

public ObservableCollection<UserViewModel> Users {get;set;} = [];
public async Task Load()
{
    Users = new ObservableCollection<UserViewModel>(await _userService.GetUsers().ToUserViewModel());
}

so instead of adding 1 by 1 you get the whole list of users then you assign it to the observable collection so it doesn't need to notify the UI on every read you do into "Add" NOTE: these are not copy paste code they are untested code as examples. these whole thing of

string Default_Customer_Query_string = "SELECT * FROM customers where Id='" + Default_Customer_Id + "'";
            using (MySqlCommand Default_Customer_Command = new MySqlCommand(Default_Customer_Query_string, Default_Customer_Details_Connection))
            {
                using (MySqlDataReader Default_Customer_reader = Default_Customer_Command.ExecuteReader())
                {
                    Defaut_Customer_list = PopulateDefaultCustomerList(Default_Customer_reader, ConnectionString);
                }
            }

string Default_Customer_Query_string = "SELECT * FROM customers where Id='" + Default_Customer_Id + "'";
            using (MySqlCommand Default_Customer_Command = new MySqlCommand(Default_Customer_Query_string, Default_Customer_Details_Connection))
            {
                using (MySqlDataReader Default_Customer_reader = Default_Customer_Command.ExecuteReader())
                {
                    Defaut_Customer_list = PopulateDefaultCustomerList(Default_Customer_reader, ConnectionString);
                }
            }

Would go into its one class to perform operations on the database which your services for example SELECT * is bad it will make things even slower and the amount of reads u do to the db every time u load the page is also bad see what elements dont change and load it only once for example if u have a list of categories that will populate a dropdown and those do not change then only load it once at the start of your application =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= I am sorry but the code right now is very poorly written and there is so much to fix that my suggestion to you is redo it slowly migrate things to async where applicable to avoid locing your UI add a loading animation so the user knows things need time to load like if you're doing an expensive query to the database it may not return immediately. avoid having logic in the constructor specially logic involving loading things that is not the place for it and if u dont post code updates of what u changed etc, I will not be able to tell what is still bad causing it to be slow.

Gaming

Programming

Delay While Page Loading