Add shimmer

files-community · Mar 4, 2024 · c0a8a51 · c0a8a51
1 parent 22edda8
commit c0a8a51
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 42 deletions.
diff --git a/src/Files.App/App.xaml b/src/Files.App/App.xaml
@@ -2,7 +2,8 @@
 <Application
 	x:Class="Files.App.App"
 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	xmlns:uc="using:Files.App.UserControls">
 
 	<Application.Resources>
 		<ResourceDictionary>
@@ -30,6 +31,23 @@
 				<Setter Target="HighContrastAdjustment" Value="None" />
 			</Style>
 
+			<Style TargetType="uc:Shimmer">
+				<Setter Property="Background" Value="{ThemeResource ShimmerBackground}" />
+				<Setter Property="CornerRadius" Value="4" />
+				<Setter Property="MinWidth" Value="8" />
+				<Setter Property="MinHeight" Value="8" />
+				<Setter Property="Template">
+					<Setter.Value>
+						<ControlTemplate TargetType="uc:Shimmer">
+							<Border
+								x:Name="Shape"
+								Background="{TemplateBinding Background}"
+								CornerRadius="{TemplateBinding CornerRadius}" />
+						</ControlTemplate>
+					</Setter.Value>
+				</Setter>
+			</Style>
+
 			<ResourceDictionary.MergedDictionaries>
 				<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
 
@@ -53,6 +71,8 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#0070CB</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+
+							<StaticResource x:Key="ShimmerBackground" ResourceKey="ControlAltFillColorTertiaryBrush" />
 						</ResourceDictionary>
 						<ResourceDictionary x:Key="Dark">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
@@ -67,6 +87,8 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#50C0FF</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+
+							<StaticResource x:Key="ShimmerBackground" ResourceKey="ControlAltFillColorTertiaryBrush" />
 						</ResourceDictionary>
 						<ResourceDictionary x:Key="HighContrast">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
@@ -81,6 +103,8 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#50C0FF</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+
+							<StaticResource x:Key="ShimmerBackground" ResourceKey="SystemColorWindowColor" />
 						</ResourceDictionary>
 					</ResourceDictionary.ThemeDictionaries>
 				</ResourceDictionary>

diff --git a/src/Files.App/Views/Layouts/ColumnLayoutPage.xaml b/src/Files.App/Views/Layouts/ColumnLayoutPage.xaml
@@ -243,15 +243,10 @@
 											Source="{x:Bind FileImage, Mode=OneWay}"
 											Stretch="Uniform" />
 									</ContentPresenter>
-									<Border
-										x:Name="TypeUnknownGlyph"
-										Width="20"
-										Height="20"
-										HorizontalAlignment="Stretch"
-										VerticalAlignment="Stretch"
-										x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-										Background="{ThemeResource SystemChromeHighColor}"
-										CornerRadius="4" />
+
+									<!--  Loading indicator  -->
+									<uc:Shimmer x:Name="TypeUnknownGlyph" x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />
+
 									<Image
 										x:Name="IconOverlay"
 										Width="16"

diff --git a/src/Files.App/Views/Layouts/DetailsLayoutPage.xaml b/src/Files.App/Views/Layouts/DetailsLayoutPage.xaml
@@ -933,15 +933,10 @@
 													Source="{x:Bind FileImage, Mode=OneWay}"
 													Stretch="Uniform" />
 											</ContentPresenter>
-											<Border
-												x:Name="TypeUnknownGlyph"
-												Width="20"
-												Height="20"
-												HorizontalAlignment="Stretch"
-												VerticalAlignment="Stretch"
-												x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-												Background="{ThemeResource SystemChromeHighColor}"
-												CornerRadius="4" />
+
+											<!--  Loading indicator  -->
+											<uc:Shimmer x:Name="TypeUnknownGlyph" x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />
+
 											<FontIcon
 												x:Name="WebShortcutGlyph"
 												x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"

diff --git a/src/Files.App/Views/Layouts/GridLayoutPage.xaml b/src/Files.App/Views/Layouts/GridLayoutPage.xaml
@@ -131,16 +131,11 @@
 								Stretch="Uniform" />
 						</ContentPresenter>
 
-						<Border
+						<!--  Loading indicator  -->
+						<uc:Shimmer
 							x:Name="TypeUnknownGlyph"
-							MaxWidth="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
-							MaxHeight="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
 							Margin="12"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Stretch"
-							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-							Background="{ThemeResource SystemChromeHighColor}"
-							CornerRadius="4" />
+							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />
 
 						<Image
 							x:Name="IconOverlay"
@@ -334,15 +329,10 @@
 									Source="{x:Bind FileImage, Mode=OneWay}"
 									Stretch="Uniform" />
 							</ContentPresenter>
-							<Border
-								x:Name="TypeUnknownGlyph"
-								Width="20"
-								Height="20"
-								HorizontalAlignment="Center"
-								VerticalAlignment="Center"
-								x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-								Background="{ThemeResource SystemChromeHighColor}"
-								CornerRadius="4" />
+
+							<!--  Loading indicator  -->
+							<uc:Shimmer x:Name="TypeUnknownGlyph" x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />
+
 							<FontIcon
 								x:Name="WebShortcutGlyph"
 								x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
@@ -526,15 +516,12 @@
 								Stretch="Uniform" />
 						</ContentPresenter>
 
-						<Border
+						<!--  Loading indicator  -->
+						<uc:Shimmer
 							x:Name="TypeUnknownGlyph"
 							Width="60"
 							Height="60"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Stretch"
-							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-							Background="{ThemeResource SystemChromeHighColor}"
-							CornerRadius="4" />
+							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />
 
 						<Image
 							x:Name="IconOverlay"