fix lag when typing in search bar (#169)

ErsatzTV/Shared/MainLayout.razor

@@ -10,21 +10,21 @@
 <MudSnackbarProvider/>
 
 <MudLayout>
-    <MudAppBar Elevation="1">
+    <MudAppBar Elevation="1" Class="app-bar">
         <div style="min-width: 240px">
             <a href="/">
                 <img src="/images/ersatztv.png" alt="ErsatzTV"/>
             </a>
         </div>
-        <MudTextField T="string"
+        <EditForm Model="@_dummyModel" OnSubmit="@(_ => PerformSearch())">
-                      @bind-Value="@_query"
+            <MudTextField T="string"
-                      AdornmentIcon="@Icons.Material.Filled.Search"
+                          @bind-Value="@_query"
-                      Adornment="Adornment.Start"
+                          AdornmentIcon="@Icons.Material.Filled.Search"
-                      Variant="Variant.Outlined"
+                          Adornment="Adornment.Start"
-                      Class="search-bar"
+                          Variant="Variant.Outlined"
-                      OnKeyDown="@OnSearchKeyDown"
+                          Class="search-bar">
-                      Immediate="true">
+            </MudTextField>
-        </MudTextField>
+        </EditForm>
         <MudAppBarSpacer/>
         <MudLink Color="Color.Info" Href="/iptv/channels.m3u" Target="_blank" Underline="Underline.None">M3U</MudLink>
         <MudLink Color="Color.Info" Href="/iptv/xmltv.xml" Target="_blank" Class="mx-4" Underline="Underline.None">XMLTV</MudLink>
@@ -74,6 +74,10 @@
 
     private string _query;
 
+    private record SearchModel;
+
+    private SearchModel _dummyModel = new();
+
     private MudTheme _ersatzTvTheme => new()
     {
         Palette = new Palette
@@ -122,4 +126,11 @@
         }
     }
 
+    private void PerformSearch()
+    {
+        string query = HttpUtility.UrlEncode(_query);
+        NavigationManager.NavigateTo($"/search?query={query}", true);
+        StateHasChanged();
+    }
+
 }

ErsatzTV/wwwroot/css/site.css

@@ -74,6 +74,10 @@
     border-radius: 4px;
 }
 
+.app-bar form {
+    flex-grow: 1;
+}
+
 .fanart-container {
     position: relative;
     width: 100%;