Display connecting / failing states on toolbar user display

osu.Game/Overlays/Toolbar/ToolbarUserButton.cs

@@ -1,17 +1,19 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-#nullable disable
+using System;
-
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Localisation;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests.Responses;
-using osu.Game.Resources.Localisation.Web;
 using osu.Game.Users.Drawables;
 using osuTK;
 using osuTK.Graphics;
@@ -20,59 +22,97 @@ namespace osu.Game.Overlays.Toolbar
 {
     public class ToolbarUserButton : ToolbarOverlayToggleButton
     {
-        private readonly UpdateableAvatar avatar;
+        private UpdateableAvatar avatar = null!;
 
-        [Resolved]
+        private IBindable<APIUser> localUser = null!;
-        private IAPIProvider api { get; set; }
 
-        private readonly IBindable<APIState> apiState = new Bindable<APIState>();
+        private LoadingSpinner spinner = null!;
+
+        private SpriteIcon failingIcon = null!;
+
+        private IBindable<APIState> apiState = null!;
 
         public ToolbarUserButton()
         {
             AutoSizeAxes = Axes.X;
+        }
 
-            DrawableText.Font = OsuFont.GetFont(italics: true);
+        [BackgroundDependencyLoader]
-
+        private void load(OsuColour colours, IAPIProvider api, LoginOverlay? login)
+        {
             Add(new OpaqueBackground { Depth = 1 });
 
-            Flow.Add(avatar = new UpdateableAvatar(isInteractive: false)
+            Flow.Add(new Container
             {
                 Masking = true,
+                CornerRadius = 4,
                 Size = new Vector2(32),
                 Anchor = Anchor.CentreLeft,
                 Origin = Anchor.CentreLeft,
-                CornerRadius = 4,
                 EdgeEffect = new EdgeEffectParameters
                 {
                     Type = EdgeEffectType.Shadow,
                     Radius = 4,
                     Colour = Color4.Black.Opacity(0.1f),
+                },
+                Children = new Drawable[]
+                {
+                    avatar = new UpdateableAvatar(isInteractive: false)
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    spinner = new LoadingLayer(dimBackground: true, withBox: false, blockInput: false)
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    failingIcon = new SpriteIcon
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Alpha = 0,
+                        Size = new Vector2(0.3f),
+                        Icon = FontAwesome.Solid.ExclamationTriangle,
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colours.YellowLight,
+                    },
                 }
             });
-        }
 
-        [BackgroundDependencyLoader(true)]
+            apiState = api.State.GetBoundCopy();
-        private void load(LoginOverlay login)
-        {
-            apiState.BindTo(api.State);
             apiState.BindValueChanged(onlineStateChanged, true);
 
+            localUser = api.LocalUser.GetBoundCopy();
+            localUser.BindValueChanged(userChanged, true);
+
             StateContainer = login;
         }
 
+        private void userChanged(ValueChangedEvent<APIUser> user)
+        {
+            Text = user.NewValue.Username;
+            avatar.User = user.NewValue;
+        }
+
         private void onlineStateChanged(ValueChangedEvent<APIState> state) => Schedule(() =>
         {
+            failingIcon.FadeTo(state.NewValue == APIState.Failing ? 1 : 0, 200, Easing.OutQuint);
+
             switch (state.NewValue)
             {
-                default:
+                case APIState.Connecting:
-                    Text = UsersStrings.AnonymousUsername;
+                case APIState.Failing:
-                    avatar.User = new APIUser();
+                    spinner.Show();
                     break;
 
+                case APIState.Offline:
                 case APIState.Online:
-                    Text = api.LocalUser.Value.Username;
+                    spinner.Hide();
-                    avatar.User = api.LocalUser.Value;
                     break;
+
+                default:
+                    throw new ArgumentOutOfRangeException();
             }
         });
     }