Display Comments on Frontend

Follow

This feature enables users to view and interact with a list of comments within worksheets, allowing them to follow conversations and track the history of changes. The comments section is designed for clarity, usability, and efficient navigation, supporting lazy loading and clear date separation.

Features

1. Comment Ordering and Display

  • Comments are displayed in chronological order, with the oldest at the top and the newest at the bottom.

  • Each comment includes:

    • The user’s name.

    • The user’s avatar (generated via ui-avatars.com).

    • The text of the comment.

    • The time the comment was posted (e.g., "2:15 PM").

2. Date Separation

  • A date separator is inserted when the date changes between comments.

    • If comments are from today, the separator displays “Today”.

    • If comments are from yesterday, it displays “Yesterday”.

    • For older comments, the full date is shown (e.g., “Friday, April 25th”).

  • All dates and times match the browser’s time zone.

3. Lazy Loading and Scrolling

  • The comment list supports scrolling with lazy loading.

  • As users scroll, additional comments are loaded dynamically.

  • A skeleton animation is shown during loading, as per the design.

4. Empty State

  • If there are no comments, an empty state is displayed according to the design specifications.

  • Users can include links in their comments.

    • Links are displayed as the full text URL.

    • Links appear in green.

    • Clicking a link opens it in a new window.

Usage Instructions

  1. Navigate to the worksheet where comments are enabled.

  2. Scroll through the comments to view the conversation history.

  3. Add new comments as needed; your name, avatar, and timestamp will be displayed automatically.

  4. Include links in your comments by pasting the full URL; they will be styled and behave as described above.

  5. If there are no comments, the empty state will be shown.

last updated: 3/4/26

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.