Optimize UI Load performance

config/themes.json

@@ -35,7 +35,8 @@
         "CheckboxMouseOverColor": "#999999",
         "ButtonBorderThickness":  "1",
         "ButtonMargin":  "1",
-        "ButtonCornerRadius": "2"
+        "ButtonCornerRadius": "2",
+        "AppTileImageSize": "40"
     },
     "Light": {
         "AppInstallUnselectedColor": "#F0F0F0",

functions/private/Initalize-InstallAppEntry.ps1

@@ -10,22 +10,14 @@ function Initialize-InstallAppEntry {
     #>
         param(
             [Windows.Controls.WrapPanel]$TargetElement,
-            $AppKey
+            $AppKey  
         )
-        $App = $sync.configs.applicationsHashtable.$AppKey
+
         # Create the outer Border for the application type
         $border = New-Object Windows.Controls.Border
-        $border.BorderBrush = [Windows.Media.Brushes]::Gray
+        $border.Style = $sync.Form.Resources.AppTileBorderStyle
-        $border.SetResourceReference([Windows.Controls.Control]::BorderThicknessProperty, "AppTileBorderThickness")
+        $border.Tag = $AppKey
-        $border.CornerRadius = 5
+        $border.ToolTip = $Apps.$AppKey.description
-        $border.SetResourceReference([Windows.Controls.Control]::PaddingProperty, "AppTileMargins")
-        $border.SetResourceReference([Windows.Controls.Control]::WidthProperty, "AppTileWidth")
-        $border.VerticalAlignment = "Top"
-        $border.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $border.Cursor = [System.Windows.Input.Cursors]::Hand
-        $border.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
-        $border.Tag = $Appkey
-        $border.ToolTip = $App.description
         $border.Add_MouseUp({
             $childCheckbox = ($this.Child.Children | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
             $childCheckBox.isChecked = -not $childCheckbox.IsChecked
@@ -48,11 +40,7 @@ function Initialize-InstallAppEntry {
         # Create the CheckBox, vertically centered
         $checkBox = New-Object Windows.Controls.CheckBox
         $checkBox.Name = $AppKey
-        $checkBox.Background = "Transparent"
+        $checkbox.Style = $sync.Form.Resources.AppTileCheckboxStyle
-        $checkBox.HorizontalAlignment = "Left"
-        $checkBox.VerticalAlignment = "Center"
-        $checkBox.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle")
         $checkbox.Add_Checked({
             Invoke-WPFSelectedAppsUpdate -type "Add" -checkbox $this
             $borderElement = $this.Parent.Parent
@@ -64,7 +52,7 @@ function Initialize-InstallAppEntry {
             $borderElement = $this.Parent.Parent
             $borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
         })
-        $sync.$($checkBox.Name) = $checkBox
+        
         # Create a StackPanel for the image and name
         $imageAndNamePanel = New-Object Windows.Controls.StackPanel
         $imageAndNamePanel.Orientation = "Horizontal"
@@ -73,29 +61,15 @@ function Initialize-InstallAppEntry {
         # Create the Image and set a placeholder
         $image = New-Object Windows.Controls.Image
         # $image.Name = "wpfapplogo" + $App.Name
-        $image.Width = 40
+        $image.Style = $sync.Form.Resources.AppTileImageStyle
-        $image.Height = 40
-        $image.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
         $image.Source = $noimage  # Ensure $noimage is defined in your script
 
-        # Clip the image corners
-        $image.Clip = New-Object Windows.Media.RectangleGeometry
-        $image.Clip.Rect = New-Object Windows.Rect(0, 0, $image.Width, $image.Height)
-        $image.Clip.RadiusX = 5
-        $image.Clip.RadiusY = 5
-        $image.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
-
         $imageAndNamePanel.Children.Add($image) | Out-Null
 
         # Create the TextBlock for the application name
         $appName = New-Object Windows.Controls.TextBlock
-        $appName.Text = $App.Content
+        $appName.Style = $sync.Form.Resources.AppTileNameStyle
-        $appName.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "AppTileFontSize")
+        $appName.Text = $Apps.$AppKey.content
-        $appName.FontWeight = [Windows.FontWeights]::Bold
-        $appName.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
-        $appName.VerticalAlignment = "Center"
-        $appName.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $appName.Background = "Transparent"
         $imageAndNamePanel.Children.Add($appName) | Out-Null
 
         # Add the image and name panel to the Checkbox
@@ -107,91 +81,53 @@ function Initialize-InstallAppEntry {
 
         # Create the StackPanel for the buttons and dock it to the right
         $buttonPanel = New-Object Windows.Controls.StackPanel
-        $buttonPanel.Orientation = "Horizontal"
+        $buttonPanel.Style = $sync.Form.Resources.AppTileButtonPanelStyle
-        $buttonPanel.HorizontalAlignment = "Right"
-        $buttonPanel.VerticalAlignment = "Center"
-        $buttonPanel.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $buttonPanel.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
         [Windows.Controls.DockPanel]::SetDock($buttonPanel, [Windows.Controls.Dock]::Right)
 
-        # Create the "Install" button
+        # Define the button properties
-        $installButton = New-Object Windows.Controls.Button
+        $buttons = @(
-        $installButton.Width = 45
+            [PSCustomObject]@{ Name = "Install"; Description = "Install or Upgrade the application"; Tooltip = "Install or Upgrade the application"; Icon = [char]0xE118 },
-        $installButton.Height = 35
+            [PSCustomObject]@{ Name = "Uninstall"; Description = "Uninstall the application"; Tooltip = "Uninstall the application"; Icon = [char]0xE74D },
-        $installButton.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
+            [PSCustomObject]@{ Name = "Info"; Description = "Open the application's website in your default browser"; Tooltip = "Open the application's website in your default browser"; Icon = [char]0xE946 }
+        )
 
-        $installIcon = New-Object Windows.Controls.TextBlock
+        # Iterate over each button and create it
-        $installIcon.Text = [char]0xE118  # Install Icon
+        foreach ($button in $buttons) {
-        $installIcon.FontFamily = "Segoe MDL2 Assets"
+            $newButton = New-Object Windows.Controls.Button
-        $installIcon.FontSize = 20
+            $newButton.Style = $sync.Form.Resources.AppTileButtonStyle
-        $installIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+            $newButton.Content = $button.Icon
-        $installIcon.Background = "Transparent"
+            $newButton.ToolTip = $button.Tooltip
-        $installIcon.HorizontalAlignment = "Center"
+            $buttonPanel.Children.Add($newButton) | Out-Null
-        $installIcon.VerticalAlignment = "Center"
 
-        $installButton.Content = $installIcon
+            switch ($button.Name) {
-        $installButton.ToolTip = "Install or Upgrade the application"
+                "Install" {
-        $buttonPanel.Children.Add($installButton) | Out-Null
+                    $newButton.Add_Click({
-
+                        $appKey = $this.Parent.Parent.Parent.Tag
-        # Add Click event for the "Install" button
+                        $appObject = $sync.configs.applicationsHashtable.$appKey
-        $installButton.Add_Click({
+                        Invoke-WPFInstall -PackagesToInstall $appObject
-            $appKey = $this.Parent.Parent.Parent.Tag
+                    })
-            $appObject = $sync.configs.applicationsHashtable.$appKey
+                }
-            Invoke-WPFInstall -PackagesToInstall $appObject
+                "Uninstall" {
-        })
+                    $newButton.Add_Click({
-
+                        $appKey = $this.Parent.Parent.Parent.Tag
-        # Create the "Uninstall" button
+                        $appObject = $sync.configs.applicationsHashtable.$appKey
-        $uninstallButton = New-Object Windows.Controls.Button
+                        Invoke-WPFUnInstall -PackagesToUninstall $appObject
-        $uninstallButton.Width = 45
+                    })
-        $uninstallButton.Height = 35
+                }
-
+                "Info" {
-        $uninstallIcon = New-Object Windows.Controls.TextBlock
+                    $newButton.Add_Click({
-        $uninstallIcon.Text = [char]0xE74D  # Uninstall Icon
+                        $appKey = $this.Parent.Parent.Parent.Tag
-        $uninstallIcon.FontFamily = "Segoe MDL2 Assets"
+                        $appObject = $sync.configs.applicationsHashtable.$appKey
-        $uninstallIcon.FontSize = 20
+                        Start-Process $appObject.link
-        $uninstallIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+                    })
-        $uninstallIcon.Background = "Transparent"
+                }
-        $uninstallIcon.HorizontalAlignment = "Center"
+            }
-        $uninstallIcon.VerticalAlignment = "Center"
+        } 
-
-        $uninstallButton.Content = $uninstallIcon
-        $buttonPanel.Children.Add($uninstallButton) | Out-Null
-
-        $uninstallButton.ToolTip = "Uninstall the application"
-        $uninstallButton.Add_Click({
-            $appKey = $this.Parent.Parent.Parent.Tag
-            $appObject = $sync.configs.applicationsHashtable.$appKey
-            Invoke-WPFUnInstall -PackagesToUninstall $appObject
-        })
-
-        # Create the "Info" button
-        $infoButton = New-Object Windows.Controls.Button
-        $infoButton.Width = 45
-        $infoButton.Height = 35
-        $infoButton.Margin = New-Object Windows.Thickness(10, 0, 0, 0)
-
-        $infoIcon = New-Object Windows.Controls.TextBlock
-        $infoIcon.Text = [char]0xE946  # Info Icon
-        $infoIcon.FontFamily = "Segoe MDL2 Assets"
-        $infoIcon.FontSize = 20
-        $infoIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
-        $infoIcon.Background = "Transparent"
-        $infoIcon.HorizontalAlignment = "Center"
-        $infoIcon.VerticalAlignment = "Center"
-
-        $infoButton.Content = $infoIcon
-        $infoButton.ToolTip = "Open the application's website in your default browser"
-        $buttonPanel.Children.Add($infoButton) | Out-Null
-
-        $infoButton.Add_Click({
-            $appKey = $this.Parent.Parent.Parent.Tag
-            $appObject = $sync.configs.applicationsHashtable.$appKey
-            Start-Process $appObject.link
-        })
 
         # Add the button panel to the DockPanel
         $dockPanel.Children.Add($buttonPanel) | Out-Null
 
         # Add the border to the corresponding Category
         $TargetElement.Children.Add($border) | Out-Null
+        return $checkbox
     }

functions/private/Initialize-InstallCategoryAppList.ps1

@@ -42,7 +42,7 @@ function Initialize-InstallCategoryAppList {
         $loadingLabel.Content = "Loading, please wait..."
         $loadingLabel.HorizontalAlignment = "Center"
         $loadingLabel.VerticalAlignment = "Center"
-        $loadingLabel.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "FontSizeHeading")
+        $loadingLabel.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "HeadingFontSize")
         $loadingLabel.FontWeight = [Windows.FontWeights]::Bold
         $loadingLabel.Foreground = [Windows.Media.Brushes]::Gray
         $sync.LoadingLabel = $loadingLabel
@@ -53,8 +53,17 @@ function Initialize-InstallCategoryAppList {
         $TargetElement.Dispatcher.Invoke([System.Windows.Threading.DispatcherPriority]::Background, [action]{
 
             $TargetElement.Items.Clear() # Remove the loading message
-            $categories = $Apps.Values | Select-Object -ExpandProperty category -Unique | Sort-Object
+
-            foreach ($category in $categories) {
+            # Pre-group apps by category
+            $appsByCategory = @{}
+            foreach ($appKey in $Apps.Keys) {
+                $category = $Apps.$appKey.Category
+                if (-not $appsByCategory.ContainsKey($category)) {
+                    $appsByCategory[$category] = @()
+                }
+                $appsByCategory[$category] += $appKey
+            }
+            foreach ($category in $($appsByCategory.Keys | Sort-Object)) {
                 Add-Category -Category $category -TargetElement $TargetElement
                 $wrapPanel = New-Object Windows.Controls.WrapPanel
                 $wrapPanel.Orientation = "Horizontal"
@@ -64,9 +73,9 @@ function Initialize-InstallCategoryAppList {
                 $wrapPanel.Visibility = [Windows.Visibility]::Collapsed
                 $wrapPanel.Tag = "CategoryWrapPanel_$category"
                 $null = $TargetElement.Items.Add($wrapPanel)
-                $Apps.Keys | Where-Object { $Apps.$_.Category -eq $category } | Sort-Object | ForEach-Object {
+                $appsByCategory[$category] | ForEach-Object {
-                    Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_
+                    $sync.$_ =  $(Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_)
-                }
             }
-        })
+        }
+    })
     }

functions/public/Invoke-WPFUIApps.ps1

@@ -10,9 +10,13 @@ function Invoke-WPFUIApps {
     switch ($TargetGridName) {
         "appspanel" {
             $dockPanel = Initialize-InstallAppsMainElement -TargetGridName $TargetGridName
+            log_time_taken "Setup DockPanel for Apps"
             $null = Initialize-InstallHeader -TargetElement $dockPanel
+            log_time_taken "Setup Header for Apps"
             $sync.ItemsControl = Initialize-InstallAppArea -TargetElement $dockPanel
+            log_time_taken "Setup ItemsControl for Apps"
             Initialize-InstallCategoryAppList -TargetElement $sync.ItemsControl -Apps $Apps
+            log_time_taken "UI Initialized"
         }
         default {
             Write-Output "$TargetGridName not yet implemented"

scripts/main.ps1

@@ -45,7 +45,7 @@ class GenericException : Exception {
     [string]$additionalData
     GenericException($Message) : base($Message) {}
 }
-
+log_time_taken "Main.ps1 class setup line 48"
 
 $inputXML = $inputXML -replace 'mc:Ignorable="d"', '' -replace "x:N", 'N' -replace '^<Win.*', '<Window'
 
@@ -77,7 +77,7 @@ if (-NOT ($readerOperationSuccessful)) {
     [System.GC]::Collect()
     exit 1
 }
-
+log_time_taken "Main.ps1 xaml loaded"
 # Setup the Window to follow listen for windows Theme Change events and update the winutil theme
 # throttle logic needed, because windows seems to send more than one theme change event per change
 $lastThemeChangeTime = [datetime]::MinValue
@@ -105,20 +105,21 @@ $sync.Form.Add_Loaded({
         return 0
     })
 })
-
+log_time_taken "Main.ps1 theme change event setup"
 Invoke-WinutilThemeChange -init $true
 # Load the configuration files
 
 $noimage = "https://images.emojiterra.com/google/noto-emoji/unicode-15/color/512px/1f4e6.png"
 $noimage = [Windows.Media.Imaging.BitmapImage]::new([Uri]::new($noimage))
-
+log_time_taken "Main.ps1 downloaded default image"
 $sync.configs.applicationsHashtable = @{}
 $sync.configs.applications.PSObject.Properties | ForEach-Object {
     $sync.configs.applicationsHashtable[$_.Name] = $_.Value
 }
-
+log_time_taken "Main.ps1 loaded applications"
 # Now call the function with the final merged config
 Invoke-WPFUIElements -configVariable $sync.configs.appnavigation -targetGridName "appscategory" -columncount 1
+log_time_taken "Main.ps1 loaded appnavigation"
 # Add logic to handle click to the ToggleView Button on the Install Tab
 $sync.WPFToggleView.Add_Click({
     $sync.CompactView = -not $sync.CompactView
@@ -128,9 +129,11 @@ $sync.WPFToggleView.Add_Click({
     }
 })
 Invoke-WPFUIApps -Apps $sync.configs.applicationsHashtable -targetGridName "appspanel"
-
+log_time_taken "Main.ps1 loaded appspanel"
 Invoke-WPFUIElements -configVariable $sync.configs.tweaks -targetGridName "tweakspanel" -columncount 2
+log_time_taken "Main.ps1 loaded tweakspanel"
 Invoke-WPFUIElements -configVariable $sync.configs.feature -targetGridName "featurespanel" -columncount 2
+log_time_taken "Main.ps1 loaded featurespanel"
 # Future implementation: Add Windows Version to updates panel
 #Invoke-WPFUIElements -configVariable $sync.configs.updates -targetGridName "updatespanel" -columncount 1
 
@@ -580,6 +583,6 @@ $sync["SponsorMenuItem"].Add_Click({
 })
 
 
-
+log_time_taken "Main.ps1 before ShowDialog"
 $sync["Form"].ShowDialog() | out-null
 Stop-Transcript

scripts/start.ps1

@@ -12,6 +12,16 @@ param (
     [switch]$Run
 )
 
+function log_time_taken {
+    param (
+        [string]$description
+    )
+    $current_time = Get-Date
+    $time_taken = $current_time - $sync.start_time
+    Write-Output "[$time_taken] $description" >> $sync.log
+    $sync.start_time = $current_time
+}
+
 # Set DebugPreference based on the -Debug switch
 if ($Debug) {
     $DebugPreference = "Continue"
@@ -34,6 +44,8 @@ Add-Type -AssemblyName System.Windows.Forms
 
 # Variable to sync between runspaces
 $sync = [Hashtable]::Synchronized(@{})
+$sync.log = "$ENV:USERPROFILE\Desktop\winutil.log"
+$sync.start_time = Get-Date
 $sync.PSScriptRoot = $PSScriptRoot
 $sync.version = "#{replaceme}"
 $sync.configs = @{}
@@ -88,3 +100,5 @@ Start-Transcript -Path "$logdir\winutil_$dateTime.log" -Append -NoClobber | Out-
 # Set PowerShell window title
 $Host.UI.RawUI.WindowTitle = $myInvocation.MyCommand.Definition + "(Admin)"
 clear-host
+Write-Output "" > $sync.log
+log_time_taken "Start.ps1 finished"

xaml/inputXML.xaml

@@ -67,6 +67,82 @@
             </Trigger>
         </Style.Triggers>
     </Style>
+    <Style x:Key="AppTileBorderStyle" TargetType="Border">
+        <Setter Property="BorderBrush" Value="Gray"/>
+        <Setter Property="BorderThickness" Value="{DynamicResource AppTileBorderThickness}"/>
+        <Setter Property="CornerRadius" Value="5"/>
+        <Setter Property="Padding" Value="{DynamicResource AppTileMargins}"/>
+        <Setter Property="Width" Value="{DynamicResource AppTileWidth}"/>
+        <Setter Property="VerticalAlignment" Value="Top"/>
+        <Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Background" Value="{DynamicResource AppInstallUnselectedColor}"/>
+    </Style>
+    <Style x:Key="AppTileCheckboxStyle" TargetType="CheckBox">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="HorizontalAlignment" Value="Left"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="CheckBox">
+                    <ContentPresenter Content="{TemplateBinding Content}"
+                                    VerticalAlignment="Center"
+                                    HorizontalAlignment="Left"
+                                    Margin="{TemplateBinding Padding}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style x:Key="AppTileImageStyle" TargetType="Image">
+        <Setter Property="Width" Value="{DynamicResource AppTileImageSize}"/>
+        <Setter Property="Height" Value="{DynamicResource AppTileImageSize}"/>
+        <Setter Property="Margin">
+            <Setter.Value>
+                <Thickness Left="0" Top="0" Right="10" Bottom="0"/>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Clip">
+            <Setter.Value>
+                <RectangleGeometry Rect="0,0,40,40" RadiusX="5" RadiusY="5"/>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Visibility" Value="{DynamicResource AppTileCompactVisibility}"/>
+    </Style>
+    <Style x:Key="AppTileNameStyle" TargetType="TextBlock">
+        <Setter Property="FontSize" Value="{DynamicResource AppTileFontSize}"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
+        <Setter Property="Background" Value="Transparent"/>
+    </Style>
+    <Style x:Key="AppTileButtonPanelStyle" TargetType="StackPanel">
+        <Setter Property="Orientation" Value="Horizontal"/>
+        <Setter Property="HorizontalAlignment" Value="Right"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
+        <Setter Property="Visibility" Value="{DynamicResource AppTileCompactVisibility}"/>
+    </Style>
+    <Style x:Key="AppTileButtonStyle" TargetType="Button">
+        <Setter Property="Width" Value="45"/>
+        <Setter Property="Height" Value="35"/>
+        <Setter Property="Margin" Value="0,0,10,0"/>
+        <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundColor}"/>
+        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundColor}"/>
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="ContentTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <TextBlock Text="{Binding}" FontFamily="Segoe MDL2 Assets" FontSize="20" 
+                               Foreground="{DynamicResource MainForegroundColor}" 
+                               Background="Transparent" HorizontalAlignment="Center" 
+                               VerticalAlignment="Center"/>
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 
     <Style TargetType="Button" x:Key="HoverButtonStyle">
         <Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}" />
@@ -202,7 +278,7 @@
             <Setter Property="Foreground" Value="{DynamicResource LabelboxForegroundColor}"/>
             <Setter Property="Background" Value="{DynamicResource MainBackgroundColor}"/>
             <Setter Property="FontFamily" Value="{DynamicResource HeaderFontFamily}"/>
-            <Setter Property="FontSize" Value="{DynamicResource FontSizeHeading}"/>
+            <Setter Property="FontSize" Value="{DynamicResource HeadingFontSize}"/>
             <Setter Property="HorizontalAlignment" Value="Stretch"/>
             <Setter Property="VerticalAlignment" Value="Center"/>
             <Setter Property="HorizontalContentAlignment" Value="Left"/>