Fixed dialog bug causing dialogs to be shown briefly during page load

1 files changed, 10 insertions, 7 deletions

diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor
index 1e2929a..ded2d2d 100644
--- a/Pages/Component/Dialog.razor
+++ b/Pages/Component/Dialog.razor
@@ -1,4 +1,4 @@
-<div style="@style" class="@(visible ? "visible" : "")">
+<div style="@(heightStyle + visiblilityStyle)">
     @if(Title is not null) {
         <p>@Title</p>
         <hr/>
@@ -13,6 +13,11 @@
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
+    [Parameter]
+    public int HeightPixels  { set => height = $"{value}px"; }
+    [Parameter]
+    public int HeightPercent { set => height = $"{value}%"; }
+
     public bool Visible {
         get => visible;
         set {
@@ -21,11 +26,6 @@
         }
     }
 
-    [Parameter]
-    public int HeightPixels  { set => height = $"{value}px"; }
-    [Parameter]
-    public int HeightPercent { set => height = $"{value}%"; }
-
     public void Show() => Visible = true;
     public void Hide() => Visible = false;
 
@@ -33,6 +33,9 @@
 
     private string? height;
 
-    private string style =>
+    private string heightStyle =>
         $"{(height is null ? "" : $"max-height:{height};")}";
+
+    private string visiblilityStyle =>
+        Visible ? "opacity:1;visibility:visible;" : "opacity:0;visibility:hidden;";
 }