Block input and show loading when submitting registration

osu.Game/Graphics/UserInterface/LoadingAnimation.cs

@@ -8,6 +8,9 @@ using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterface
 {
+    /// <summary>
+    /// A loading spinner.
+    /// </summary>
     public class LoadingAnimation : VisibilityContainer
     {
         private readonly SpriteIcon spinner;

osu.Game/Graphics/UserInterface/ProcessingOverlay.cs

@@ -0,0 +1,56 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osuTK.Graphics;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    /// <summary>
+    /// An overlay that will consume all available space and block input when required.
+    /// Useful for disabling all elements in a form and showing we are waiting on a response, for instance.
+    /// </summary>
+    public class ProcessingOverlay : VisibilityContainer
+    {
+        private const float transition_duration = 200;
+
+        public ProcessingOverlay()
+        {
+            RelativeSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Colour = Color4.Black,
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0.9f,
+                },
+                new LoadingAnimation { State = Visibility.Visible }
+            };
+        }
+
+        protected override bool Handle(UIEvent e)
+        {
+            return true;
+        }
+
+        protected override void PopIn()
+        {
+            this.FadeIn(transition_duration * 2, Easing.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            this.FadeOut(transition_duration, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Overlays/AccountCreation/ScreenEntry.cs

@@ -11,6 +11,7 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.MathUtils;
+using osu.Framework.Screens;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
@@ -37,83 +38,88 @@ namespace osu.Game.Overlays.AccountCreation
         private IEnumerable<SpriteText> characterCheckText;
 
         private OsuTextBox[] textboxes;
+        private ProcessingOverlay processingOverlay;
 
         [BackgroundDependencyLoader]
         private void load(OsuColour colours, APIAccess api)
         {
             this.api = api;
 
-            Child = new FillFlowContainer
+            Children = new Drawable[]
             {
-                RelativeSizeAxes = Axes.Both,
+                new FillFlowContainer
-                Direction = FillDirection.Vertical,
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-                Padding = new MarginPadding(20),
-                Spacing = new Vector2(0, 10),
-                Children = new Drawable[]
                 {
-                    new OsuSpriteText
+                    RelativeSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                    Padding = new MarginPadding(20),
+                    Spacing = new Vector2(0, 10),
+                    Children = new Drawable[]
                     {
-                        TextSize = 20,
+                        new OsuSpriteText
-                        Margin = new MarginPadding { Vertical = 10 },
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
-                        Text = "Let's create an account!",
-                    },
-                    usernameTextBox = new OsuTextBox
-                    {
-                        PlaceholderText = "username",
-                        RelativeSizeAxes = Axes.X,
-                        TabbableContentContainer = this
-                    },
-                    usernameDescription = new ErrorTextFlowContainer
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y
-                    },
-                    emailTextBox = new OsuTextBox
-                    {
-                        PlaceholderText = "email address",
-                        RelativeSizeAxes = Axes.X,
-                        TabbableContentContainer = this
-                    },
-                    emailAddressDescription = new ErrorTextFlowContainer
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y
-                    },
-                    passwordTextBox = new OsuPasswordTextBox
-                    {
-                        PlaceholderText = "password",
-                        RelativeSizeAxes = Axes.X,
-                        TabbableContentContainer = this,
-                    },
-                    passwordDescription = new ErrorTextFlowContainer
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y
-                    },
-                    new Container
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y,
-                        Children = new Drawable[]
                         {
-                            registerShake = new ShakeContainer
+                            TextSize = 20,
+                            Margin = new MarginPadding { Vertical = 10 },
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Text = "Let's create an account!",
+                        },
+                        usernameTextBox = new OsuTextBox
+                        {
+                            PlaceholderText = "username",
+                            RelativeSizeAxes = Axes.X,
+                            TabbableContentContainer = this
+                        },
+                        usernameDescription = new ErrorTextFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y
+                        },
+                        emailTextBox = new OsuTextBox
+                        {
+                            PlaceholderText = "email address",
+                            RelativeSizeAxes = Axes.X,
+                            TabbableContentContainer = this
+                        },
+                        emailAddressDescription = new ErrorTextFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y
+                        },
+                        passwordTextBox = new OsuPasswordTextBox
+                        {
+                            PlaceholderText = "password",
+                            RelativeSizeAxes = Axes.X,
+                            TabbableContentContainer = this,
+                        },
+                        passwordDescription = new ErrorTextFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Children = new Drawable[]
                             {
-                                RelativeSizeAxes = Axes.X,
+                                registerShake = new ShakeContainer
-                                AutoSizeAxes = Axes.Y,
-                                Child = new SettingsButton
                                 {
-                                    Text = "Register",
+                                    RelativeSizeAxes = Axes.X,
-                                    Margin = new MarginPadding { Vertical = 20 },
+                                    AutoSizeAxes = Axes.Y,
-                                    Action = performRegistration
+                                    Child = new SettingsButton
+                                    {
+                                        Text = "Register",
+                                        Margin = new MarginPadding { Vertical = 20 },
+                                        Action = performRegistration
+                                    }
                                 }
                             }
-                        }
+                        },
                     },
-                }
+                },
+                processingOverlay = new ProcessingOverlay { Alpha = 0 }
             };
 
             textboxes = new[] { usernameTextBox, emailTextBox, passwordTextBox };
@@ -138,6 +144,12 @@ namespace osu.Game.Overlays.AccountCreation
                 focusNextTextbox();
         }
 
+        protected override void OnEntering(Screen last)
+        {
+            base.OnEntering(last);
+            processingOverlay.Hide();
+        }
+
         private void performRegistration()
         {
             if (focusNextTextbox())
@@ -150,6 +162,8 @@ namespace osu.Game.Overlays.AccountCreation
             emailAddressDescription.ClearErrors();
             passwordDescription.ClearErrors();
 
+            processingOverlay.Show();
+
             Task.Run(() =>
             {
                 bool success;
@@ -181,6 +195,7 @@ namespace osu.Game.Overlays.AccountCreation
                         }
 
                         registerShake.Shake();
+                        processingOverlay.Hide();
                         return;
                     }