Merge pull request #7786 from EVAST9919/subcomments-alter-new

Add ability to load long comment trees in CommentsContainer

osu.Game.Tests/Visual/Online/TestSceneCommentsPage.cs

@@ -58,8 +58,8 @@ namespace osu.Game.Tests.Visual.Online
                 }
             });
 
-            AddStep("load comments", () => createPage(comment_bundle));
+            AddStep("load comments", () => createPage(getCommentBundle()));
-            AddStep("load empty comments", () => createPage(empty_comment_bundle));
+            AddStep("load empty comments", () => createPage(getEmptyCommentBundle()));
         }
 
         private void createPage(CommentBundle commentBundle)
@@ -71,13 +71,12 @@ namespace osu.Game.Tests.Visual.Online
             });
         }
 
-        private static readonly CommentBundle empty_comment_bundle = new CommentBundle
+        private CommentBundle getEmptyCommentBundle() => new CommentBundle
         {
             Comments = new List<Comment>(),
-            Total = 0,
         };
 
-        private static readonly CommentBundle comment_bundle = new CommentBundle
+        private CommentBundle getCommentBundle() => new CommentBundle
         {
             Comments = new List<Comment>
             {
@@ -90,6 +89,33 @@ namespace osu.Game.Tests.Visual.Online
                     VotesCount = 5
                 },
                 new Comment
+                {
+                    Id = 100,
+                    Message = "This comment has \"load replies\" button because it has unloaded replies",
+                    LegacyName = "TestUser1100",
+                    CreatedAt = DateTimeOffset.Now,
+                    VotesCount = 5,
+                    RepliesCount = 2,
+                },
+                new Comment
+                {
+                    Id = 111,
+                    Message = "This comment has \"Show More\" button because it has unloaded replies, but some of them are loaded",
+                    LegacyName = "TestUser1111",
+                    CreatedAt = DateTimeOffset.Now,
+                    VotesCount = 100,
+                    RepliesCount = 2,
+                },
+                new Comment
+                {
+                    Id = 112,
+                    ParentId = 111,
+                    Message = "I'm here to make my parent work",
+                    LegacyName = "someone",
+                    CreatedAt = DateTimeOffset.Now,
+                    VotesCount = 2,
+                },
+                new Comment
                 {
                     Id = 2,
                     Message = "This comment has been deleted :( but visible for admins",
@@ -155,8 +181,6 @@ namespace osu.Game.Tests.Visual.Online
                     Username = "Good_Admin"
                 }
             },
-            TopLevelCount = 4,
-            Total = 7
         };
     }
 }

osu.Game/Online/API/Requests/GetCommentsRequest.cs

@@ -10,27 +10,32 @@ namespace osu.Game.Online.API.Requests
 {
     public class GetCommentsRequest : APIRequest<CommentBundle>
     {
-        private readonly long id;
+        private readonly long commentableId;
-        private readonly int page;
         private readonly CommentableType type;
         private readonly CommentsSortCriteria sort;
+        private readonly int page;
+        private readonly long? parentId;
 
-        public GetCommentsRequest(CommentableType type, long id, CommentsSortCriteria sort = CommentsSortCriteria.New, int page = 1)
+        public GetCommentsRequest(long commentableId, CommentableType type, CommentsSortCriteria sort = CommentsSortCriteria.New, int page = 1, long? parentId = null)
         {
+            this.commentableId = commentableId;
             this.type = type;
             this.sort = sort;
-            this.id = id;
             this.page = page;
+            this.parentId = parentId;
         }
 
         protected override WebRequest CreateWebRequest()
         {
             var req = base.CreateWebRequest();
 
+            req.AddParameter("commentable_id", commentableId.ToString());
             req.AddParameter("commentable_type", type.ToString().Underscore().ToLowerInvariant());
-            req.AddParameter("commentable_id", id.ToString());
-            req.AddParameter("sort", sort.ToString().ToLowerInvariant());
             req.AddParameter("page", page.ToString());
+            req.AddParameter("sort", sort.ToString().ToLowerInvariant());
+
+            if (parentId != null)
+                req.AddParameter("parent_id", parentId.ToString());
 
             return req;
         }

osu.Game/Online/API/Requests/Responses/Comment.cs

@@ -4,8 +4,6 @@
 using Newtonsoft.Json;
 using osu.Game.Users;
 using System;
-using System.Collections.Generic;
-using System.Linq;
 
 namespace osu.Game.Online.API.Requests.Responses
 {
@@ -17,8 +15,6 @@ namespace osu.Game.Online.API.Requests.Responses
         [JsonProperty(@"parent_id")]
         public long? ParentId { get; set; }
 
-        public readonly List<Comment> ChildComments = new List<Comment>();
-
         public Comment ParentComment { get; set; }
 
         [JsonProperty(@"user_id")]
@@ -71,7 +67,5 @@ namespace osu.Game.Online.API.Requests.Responses
         public bool HasMessage => !string.IsNullOrEmpty(Message);
 
         public bool IsVoted { get; set; }
-
-        public int DeletedChildrenCount => ChildComments.Count(c => c.IsDeleted);
     }
 }

osu.Game/Online/API/Requests/Responses/CommentBundle.cs

@@ -9,31 +9,8 @@ namespace osu.Game.Online.API.Requests.Responses
 {
     public class CommentBundle
     {
-        private List<Comment> comments;
-
         [JsonProperty(@"comments")]
-        public List<Comment> Comments
+        public List<Comment> Comments { get; set; }
-        {
-            get => comments;
-            set
-            {
-                comments = value;
-                comments.ForEach(child =>
-                {
-                    if (child.ParentId != null)
-                    {
-                        comments.ForEach(parent =>
-                        {
-                            if (parent.Id == child.ParentId)
-                            {
-                                parent.ChildComments.Add(child);
-                                child.ParentComment = parent;
-                            }
-                        });
-                    }
-                });
-            }
-        }
 
         [JsonProperty(@"has_more")]
         public bool HasMore { get; set; }
@@ -58,6 +35,7 @@ namespace osu.Game.Online.API.Requests.Responses
                 userVotes = value;
 
                 Comments.ForEach(c => c.IsVoted = value.Contains(c.Id));
+                IncludedComments.ForEach(c => c.IsVoted = value.Contains(c.Id));
             }
         }
 
@@ -81,6 +59,15 @@ namespace osu.Game.Online.API.Requests.Responses
                         if (c.EditedById == u.Id)
                             c.EditedUser = u;
                     });
+
+                    IncludedComments.ForEach(c =>
+                    {
+                        if (c.UserId == u.Id)
+                            c.User = u;
+
+                        if (c.EditedById == u.Id)
+                            c.EditedUser = u;
+                    });
                 });
             }
         }

osu.Game/Overlays/Comments/CommentsContainer.cs

@@ -18,8 +18,8 @@ namespace osu.Game.Overlays.Comments
 {
     public class CommentsContainer : CompositeDrawable
     {
-        private CommentableType type;
+        private readonly Bindable<CommentableType> type = new Bindable<CommentableType>();
-        private long? id;
+        private readonly BindableLong id = new BindableLong();
 
         public readonly Bindable<CommentsSortCriteria> Sort = new Bindable<CommentsSortCriteria>();
         public readonly BindableBool ShowDeleted = new BindableBool();
@@ -127,8 +127,8 @@ namespace osu.Game.Overlays.Comments
         /// <param name="id">The id of the resource to get comments for.</param>
         public void ShowComments(CommentableType type, long id)
         {
-            this.type = type;
+            this.type.Value = type;
-            this.id = id;
+            this.id.Value = id;
 
             if (!IsLoaded)
                 return;
@@ -147,12 +147,12 @@ namespace osu.Game.Overlays.Comments
 
         private void getComments()
         {
-            if (!id.HasValue)
+            if (id.Value <= 0)
                 return;
 
             request?.Cancel();
             loadCancellation?.Cancel();
-            request = new GetCommentsRequest(type, id.Value, Sort.Value, currentPage++);
+            request = new GetCommentsRequest(id.Value, type.Value, Sort.Value, currentPage++, 0);
             request.Success += onSuccess;
             api.PerformAsync(request);
         }
@@ -172,7 +172,10 @@ namespace osu.Game.Overlays.Comments
 
             LoadComponentAsync(new CommentsPage(response)
             {
-                ShowDeleted = { BindTarget = ShowDeleted }
+                ShowDeleted = { BindTarget = ShowDeleted },
+                Sort = { BindTarget = Sort },
+                Type = { BindTarget = type },
+                CommentableId = { BindTarget = id }
             }, loaded =>
             {
                 content.Add(loaded);

osu.Game/Overlays/Comments/CommentsPage.cs

@@ -9,14 +9,25 @@ using osu.Game.Online.API.Requests.Responses;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.Sprites;
 using System.Linq;
+using osu.Game.Online.API.Requests;
+using osu.Game.Online.API;
+using System.Collections.Generic;
+using JetBrains.Annotations;
 
 namespace osu.Game.Overlays.Comments
 {
     public class CommentsPage : CompositeDrawable
     {
         public readonly BindableBool ShowDeleted = new BindableBool();
+        public readonly Bindable<CommentsSortCriteria> Sort = new Bindable<CommentsSortCriteria>();
+        public readonly Bindable<CommentableType> Type = new Bindable<CommentableType>();
+        public readonly BindableLong CommentableId = new BindableLong();
+
+        [Resolved]
+        private IAPIProvider api { get; set; }
 
         private readonly CommentBundle commentBundle;
+        private FillFlowContainer flow;
 
         public CommentsPage(CommentBundle commentBundle)
         {
@@ -26,8 +37,6 @@ namespace osu.Game.Overlays.Comments
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)
         {
-            FillFlowContainer flow;
-
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
@@ -52,14 +61,77 @@ namespace osu.Game.Overlays.Comments
                 return;
             }
 
-            foreach (var c in commentBundle.Comments)
+            appendComments(commentBundle);
+        }
+
+        private DrawableComment getDrawableComment(Comment comment)
         {
-                if (c.IsTopLevel)
+            if (commentDictionary.TryGetValue(comment.Id, out var existing))
+                return existing;
+
+            return commentDictionary[comment.Id] = new DrawableComment(comment)
             {
-                    flow.Add(new DrawableComment(c)
+                ShowDeleted = { BindTarget = ShowDeleted },
+                Sort = { BindTarget = Sort },
+                RepliesRequested = onCommentRepliesRequested
+            };
+        }
+
+        private void onCommentRepliesRequested(DrawableComment drawableComment, int page)
         {
-                        ShowDeleted = { BindTarget = ShowDeleted }
+            var request = new GetCommentsRequest(CommentableId.Value, Type.Value, Sort.Value, page, drawableComment.Comment.Id);
-                    });
+
+            request.Success += response => Schedule(() => appendComments(response));
+
+            api.PerformAsync(request);
+        }
+
+        private readonly Dictionary<long, DrawableComment> commentDictionary = new Dictionary<long, DrawableComment>();
+
+        /// <summary>
+        /// Appends retrieved comments to the subtree rooted of comments in this page.
+        /// </summary>
+        /// <param name="bundle">The bundle of comments to add.</param>
+        private void appendComments([NotNull] CommentBundle bundle)
+        {
+            var orphaned = new List<Comment>();
+
+            foreach (var topLevel in bundle.Comments)
+                addNewComment(topLevel);
+
+            foreach (var child in bundle.IncludedComments)
+            {
+                // Included comments can contain the parent comment, which already exists in the hierarchy.
+                if (commentDictionary.ContainsKey(child.Id))
+                    continue;
+
+                addNewComment(child);
+            }
+
+            // Comments whose parents were seen later than themselves can now be added.
+            foreach (var o in orphaned)
+                addNewComment(o);
+
+            void addNewComment(Comment comment)
+            {
+                var drawableComment = getDrawableComment(comment);
+
+                if (comment.ParentId == null)
+                {
+                    // Comments that have no parent are added as top-level comments to the flow.
+                    flow.Add(drawableComment);
+                }
+                else if (commentDictionary.TryGetValue(comment.ParentId.Value, out var parentDrawable))
+                {
+                    // The comment's parent has already been seen, so the parent<-> child links can be added.
+                    comment.ParentComment = parentDrawable.Comment;
+                    parentDrawable.Replies.Add(drawableComment);
+                }
+                else
+                {
+                    // The comment's parent has not been seen yet, so keep it orphaned for the time being. This can occur if the comments arrive out of order.
+                    // Since this comment has now been seen, any further children can be added to it without being orphaned themselves.
+                    orphaned.Add(comment);
                 }
             }
         }

osu.Game/Overlays/Comments/DrawableComment.cs

@@ -12,11 +12,16 @@ using osu.Game.Graphics.Containers;
 using osu.Game.Utils;
 using osu.Framework.Graphics.Cursor;
 using osu.Framework.Bindables;
-using osu.Framework.Graphics.Shapes;
 using System.Linq;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Online.Chat;
 using osu.Framework.Allocation;
+using osuTK.Graphics;
+using System.Collections.Generic;
+using System;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Extensions.IEnumerableExtensions;
+using System.Collections.Specialized;
 
 namespace osu.Game.Overlays.Comments
 {
@@ -25,24 +30,37 @@ namespace osu.Game.Overlays.Comments
         private const int avatar_size = 40;
         private const int margin = 10;
 
+        public Action<DrawableComment, int> RepliesRequested;
+
+        public readonly Comment Comment;
+
         public readonly BindableBool ShowDeleted = new BindableBool();
+        public readonly Bindable<CommentsSortCriteria> Sort = new Bindable<CommentsSortCriteria>();
+        private readonly Dictionary<long, Comment> loadedReplies = new Dictionary<long, Comment>();
+
+        public readonly BindableList<DrawableComment> Replies = new BindableList<DrawableComment>();
 
         private readonly BindableBool childrenExpanded = new BindableBool(true);
 
+        private int currentPage;
+
         private FillFlowContainer childCommentsVisibilityContainer;
-        private readonly Comment comment;
+        private FillFlowContainer childCommentsContainer;
+        private LoadMoreCommentsButton loadMoreCommentsButton;
+        private ShowMoreButton showMoreButton;
+        private RepliesButton repliesButton;
+        private ChevronButton chevronButton;
+        private DeletedCommentsCounter deletedCommentsCounter;
 
         public DrawableComment(Comment comment)
         {
-            this.comment = comment;
+            Comment = comment;
         }
 
         [BackgroundDependencyLoader]
         private void load()
         {
             LinkFlowContainer username;
-            FillFlowContainer childCommentsContainer;
-            DeletedCommentsCounter deletedCommentsCounter;
             FillFlowContainer info;
             LinkFlowContainer message;
             GridContainer content;
@@ -50,7 +68,9 @@ namespace osu.Game.Overlays.Comments
 
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
-            InternalChild = new FillFlowContainer
+            InternalChildren = new Drawable[]
+            {
+                new FillFlowContainer
                 {
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
@@ -93,13 +113,13 @@ namespace osu.Game.Overlays.Comments
                                                     Origin = Anchor.Centre,
                                                     Width = 40,
                                                     AutoSizeAxes = Axes.Y,
-                                                Child = votePill = new VotePill(comment)
+                                                    Child = votePill = new VotePill(Comment)
                                                     {
                                                         Anchor = Anchor.CentreRight,
                                                         Origin = Anchor.CentreRight,
                                                     }
                                                 },
-                                            new UpdateableAvatar(comment.User)
+                                                new UpdateableAvatar(Comment.User)
                                                 {
                                                     Anchor = Anchor.Centre,
                                                     Origin = Anchor.Centre,
@@ -128,10 +148,10 @@ namespace osu.Game.Overlays.Comments
                                                         {
                                                             AutoSizeAxes = Axes.Both,
                                                         },
-                                                    new ParentUsername(comment),
+                                                        new ParentUsername(Comment),
                                                         new OsuSpriteText
                                                         {
-                                                        Alpha = comment.IsDeleted ? 1 : 0,
+                                                            Alpha = Comment.IsDeleted ? 1 : 0,
                                                             Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true),
                                                             Text = @"deleted",
                                                         }
@@ -148,7 +168,6 @@ namespace osu.Game.Overlays.Comments
                                                     AutoSizeAxes = Axes.Both,
                                                     Direction = FillDirection.Horizontal,
                                                     Spacing = new Vector2(10, 0),
-                                                Colour = OsuColour.Gray(0.7f),
                                                     Children = new Drawable[]
                                                     {
                                                         new OsuSpriteText
@@ -156,12 +175,17 @@ namespace osu.Game.Overlays.Comments
                                                             Anchor = Anchor.CentreLeft,
                                                             Origin = Anchor.CentreLeft,
                                                             Font = OsuFont.GetFont(size: 12),
-                                                        Text = HumanizerUtils.Humanize(comment.CreatedAt)
+                                                            Colour = OsuColour.Gray(0.7f),
+                                                            Text = HumanizerUtils.Humanize(Comment.CreatedAt)
                                                         },
-                                                    new RepliesButton(comment.RepliesCount)
+                                                        repliesButton = new RepliesButton(Comment.RepliesCount)
                                                         {
                                                             Expanded = { BindTarget = childrenExpanded }
                                                         },
+                                                        loadMoreCommentsButton = new LoadMoreCommentsButton
+                                                        {
+                                                            Action = () => RepliesRequested(this, ++currentPage)
+                                                        }
                                                     }
                                                 }
                                             }
@@ -187,97 +211,153 @@ namespace osu.Game.Overlays.Comments
                                 deletedCommentsCounter = new DeletedCommentsCounter
                                 {
                                     ShowDeleted = { BindTarget = ShowDeleted }
+                                },
+                                showMoreButton = new ShowMoreButton
+                                {
+                                    Action = () => RepliesRequested(this, ++currentPage)
                                 }
                             }
+                        },
                     }
+                },
+                chevronButton = new ChevronButton
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    Margin = new MarginPadding { Right = 30, Top = margin },
+                    Expanded = { BindTarget = childrenExpanded },
+                    Alpha = 0
                 }
             };
 
-            deletedCommentsCounter.Count.Value = comment.DeletedChildrenCount;
+            if (Comment.UserId.HasValue)
-
+                username.AddUserLink(Comment.User);
-            if (comment.UserId.HasValue)
-                username.AddUserLink(comment.User);
             else
-                username.AddText(comment.LegacyName);
+                username.AddText(Comment.LegacyName);
 
-            if (comment.EditedAt.HasValue)
+            if (Comment.EditedAt.HasValue)
             {
                 info.Add(new OsuSpriteText
                 {
                     Anchor = Anchor.CentreLeft,
                     Origin = Anchor.CentreLeft,
                     Font = OsuFont.GetFont(size: 12),
-                    Text = $@"edited {HumanizerUtils.Humanize(comment.EditedAt.Value)} by {comment.EditedUser.Username}"
+                    Text = $@"edited {HumanizerUtils.Humanize(Comment.EditedAt.Value)} by {Comment.EditedUser.Username}"
                 });
             }
 
-            if (comment.HasMessage)
+            if (Comment.HasMessage)
             {
-                var formattedSource = MessageFormatter.FormatText(comment.Message);
+                var formattedSource = MessageFormatter.FormatText(Comment.Message);
                 message.AddLinks(formattedSource.Text, formattedSource.Links);
             }
 
-            if (comment.IsDeleted)
+            if (Comment.IsDeleted)
             {
                 content.FadeColour(OsuColour.Gray(0.5f));
                 votePill.Hide();
             }
 
-            if (comment.IsTopLevel)
+            if (Comment.IsTopLevel)
             {
-                AddInternal(new Container
+                AddInternal(new Box
                 {
-                    RelativeSizeAxes = Axes.X,
-                    Height = 1.5f,
                     Anchor = Anchor.BottomCentre,
                     Origin = Anchor.BottomCentre,
-                    Child = new Box
+                    RelativeSizeAxes = Axes.X,
-                    {
+                    Height = 1.5f,
-                        RelativeSizeAxes = Axes.Both,
                     Colour = OsuColour.Gray(0.1f)
-                    }
-                });
-
-                if (comment.ChildComments.Any())
-                {
-                    AddInternal(new ChevronButton(comment)
-                    {
-                        Anchor = Anchor.TopRight,
-                        Origin = Anchor.TopRight,
-                        Margin = new MarginPadding { Right = 30, Top = margin },
-                        Expanded = { BindTarget = childrenExpanded }
                 });
             }
-            }
 
-            comment.ChildComments.ForEach(c => childCommentsContainer.Add(new DrawableComment(c)
+            if (Replies.Any())
+                onRepliesAdded(Replies);
+
+            Replies.CollectionChanged += (_, args) =>
             {
-                ShowDeleted = { BindTarget = ShowDeleted }
+                switch (args.Action)
-            }));
+                {
+                    case NotifyCollectionChangedAction.Add:
+                        onRepliesAdded(args.NewItems.Cast<DrawableComment>());
+                        break;
+
+                    default:
+                        throw new NotSupportedException(@"You can only add replies to this list. Other actions are not supported.");
+                }
+            };
         }
 
         protected override void LoadComplete()
         {
             ShowDeleted.BindValueChanged(show =>
             {
-                if (comment.IsDeleted)
+                if (Comment.IsDeleted)
                     this.FadeTo(show.NewValue ? 1 : 0);
             }, true);
             childrenExpanded.BindValueChanged(expanded => childCommentsVisibilityContainer.FadeTo(expanded.NewValue ? 1 : 0), true);
+
+            updateButtonsState();
+
             base.LoadComplete();
         }
 
+        public bool ContainsReply(long replyId) => loadedReplies.ContainsKey(replyId);
+
+        private void onRepliesAdded(IEnumerable<DrawableComment> replies)
+        {
+            var page = createRepliesPage(replies);
+
+            if (LoadState == LoadState.Loading)
+            {
+                addRepliesPage(page, replies);
+                return;
+            }
+
+            LoadComponentAsync(page, loaded => addRepliesPage(loaded, replies));
+        }
+
+        private void addRepliesPage(FillFlowContainer<DrawableComment> page, IEnumerable<DrawableComment> replies)
+        {
+            childCommentsContainer.Add(page);
+
+            var newReplies = replies.Select(reply => reply.Comment);
+            newReplies.ForEach(reply => loadedReplies.Add(reply.Id, reply));
+            deletedCommentsCounter.Count.Value += newReplies.Count(reply => reply.IsDeleted);
+            updateButtonsState();
+        }
+
+        private FillFlowContainer<DrawableComment> createRepliesPage(IEnumerable<DrawableComment> replies) => new FillFlowContainer<DrawableComment>
+        {
+            RelativeSizeAxes = Axes.X,
+            AutoSizeAxes = Axes.Y,
+            Direction = FillDirection.Vertical,
+            Children = replies.ToList()
+        };
+
+        private void updateButtonsState()
+        {
+            var loadedReplesCount = loadedReplies.Count;
+            var hasUnloadedReplies = loadedReplesCount != Comment.RepliesCount;
+
+            loadMoreCommentsButton.FadeTo(hasUnloadedReplies && loadedReplesCount == 0 ? 1 : 0);
+            showMoreButton.FadeTo(hasUnloadedReplies && loadedReplesCount > 0 ? 1 : 0);
+            repliesButton.FadeTo(loadedReplesCount != 0 ? 1 : 0);
+
+            if (Comment.IsTopLevel)
+                chevronButton.FadeTo(loadedReplesCount != 0 ? 1 : 0);
+
+            showMoreButton.IsLoading = loadMoreCommentsButton.IsLoading = false;
+        }
+
         private class ChevronButton : ShowChildrenButton
         {
             private readonly SpriteIcon icon;
 
-            public ChevronButton(Comment comment)
+            public ChevronButton()
             {
-                Alpha = comment.IsTopLevel && comment.ChildComments.Any() ? 1 : 0;
                 Child = icon = new SpriteIcon
                 {
                     Size = new Vector2(12),
-                    Colour = OsuColour.Gray(0.7f)
                 };
             }
 
@@ -296,7 +376,6 @@ namespace osu.Game.Overlays.Comments
             {
                 this.count = count;
 
-                Alpha = count == 0 ? 0 : 1;
                 Child = text = new OsuSpriteText
                 {
                     Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
@@ -309,6 +388,30 @@ namespace osu.Game.Overlays.Comments
             }
         }
 
+        private class LoadMoreCommentsButton : GetCommentRepliesButton
+        {
+            public LoadMoreCommentsButton()
+            {
+                IdleColour = OsuColour.Gray(0.7f);
+                HoverColour = Color4.White;
+            }
+
+            protected override string GetText() => @"[+] load replies";
+        }
+
+        private class ShowMoreButton : GetCommentRepliesButton
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Margin = new MarginPadding { Vertical = 10, Left = 80 };
+                IdleColour = colourProvider.Light2;
+                HoverColour = colourProvider.Light1;
+            }
+
+            protected override string GetText() => @"Show More";
+        }
+
         private class ParentUsername : FillFlowContainer, IHasTooltip
         {
             public string TooltipText => getParentMessage();

osu.Game/Overlays/Comments/GetCommentRepliesButton.cs

@@ -0,0 +1,45 @@
+// 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.
+
+using osu.Framework.Graphics;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using System.Collections.Generic;
+using osuTK;
+
+namespace osu.Game.Overlays.Comments
+{
+    public abstract class GetCommentRepliesButton : LoadingButton
+    {
+        private const int duration = 200;
+
+        protected override IEnumerable<Drawable> EffectTargets => new[] { text };
+
+        private OsuSpriteText text;
+
+        protected GetCommentRepliesButton()
+        {
+            AutoSizeAxes = Axes.Both;
+            LoadingAnimationSize = new Vector2(8);
+        }
+
+        protected override Drawable CreateContent() => new Container
+        {
+            AutoSizeAxes = Axes.Both,
+            Child = text = new OsuSpriteText
+            {
+                AlwaysPresent = true,
+                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                Text = GetText()
+            }
+        };
+
+        protected abstract string GetText();
+
+        protected override void OnLoadStarted() => text.FadeOut(duration, Easing.OutQuint);
+
+        protected override void OnLoadFinished() => text.FadeIn(duration, Easing.OutQuint);
+    }
+}

osu.Game/Overlays/Comments/ShowChildrenButton.cs

@@ -3,8 +3,9 @@
 
 using osu.Framework.Graphics;
 using osu.Game.Graphics.Containers;
-using osu.Framework.Input.Events;
 using osu.Framework.Bindables;
+using osuTK.Graphics;
+using osu.Game.Graphics;
 
 namespace osu.Game.Overlays.Comments
 {
@@ -15,20 +16,18 @@ namespace osu.Game.Overlays.Comments
         protected ShowChildrenButton()
         {
             AutoSizeAxes = Axes.Both;
+            IdleColour = OsuColour.Gray(0.7f);
+            HoverColour = Color4.White;
         }
 
         protected override void LoadComplete()
         {
+            Action = Expanded.Toggle;
+
             Expanded.BindValueChanged(OnExpandedChanged, true);
             base.LoadComplete();
         }
 
         protected abstract void OnExpandedChanged(ValueChangedEvent<bool> expanded);
-
-        protected override bool OnClick(ClickEvent e)
-        {
-            Expanded.Value = !Expanded.Value;
-            return true;
-        }
     }
 }