SSWConsulting
✨ Leaderboard Enhancements - Improve Display and Refresh Features (v1)
- What triggered this change? (PBI link, Email Subject, conversation + reason, etc)
Issue #1442 - Kiosk leaderboard needed better UX: cleaner display, real-time feedback, and auto-scrolling through results like airport displays.
- What was changed?
** Figure: Updated UI with 30 per page, automatic switching of users, etc."
Display improvements:
- Removed "Total" from points column header → "Points"
- Added thousand separators to numbers (11,535 vs 11535)
- Added tagline below logo: "Use this app to scan SSW QR codes, earn SSW Points ⭐, claim rewards and win prizes!"
- Changed "Last updated" to "Last refreshed" (per transcript feedback)
- Added live countdown in parentheses format: "(refreshing in 45 seconds)" that updates every second
Auto-scroll implementation:
- Cycles through pages every 10 seconds
- Fixed page size at 30 users (removed manual pager)
- Smart boundary detection: only scrolls through pages with users having points > 0
- Example: 35 users with points → shows 2 pages (30 + 5), stops there
- Three timers: 60s refresh, 100ms progress bar countdown, 10s scroll (all properly disposed)
Display format:
Last refreshed: 2 minutes ago (refreshing in 45 seconds)
Technical details:
// Smart page calculation - stops at last user with points
var usersWithPointsOnPage = result.Items.Count(u => u.Points > 0);
if (usersWithPointsOnPage < _defaultPageSize || usersWithPointsOnPage < result.Items.Count())
{
var totalUsersWithPoints = (state.Page * _defaultPageSize) + usersWithPointsOnPage;
_totalPages = Math.Max(1, (int)Math.Ceiling((double)totalUsersWithPoints / _defaultPageSize));
}
File changed:
-
src/AdminUI/Pages/KioskLeaderboard.razor
- Did you do pair or mob programming?
Technically yes - implemented via GitHub Copilot Workspace with human assistant
Original prompt
This section details on the original issue you should resolve
<issue_title>✨ Leaderboard Enhancements - Improve Display and Refresh Features + video v3</issue_title> <issue_description>Requested by: @jernejk via YakShaver.ai 🦬 cc: @adamcogan, @jernejk, @Freego1783, @zacharykeeping
Hi Team!
🟥 Watch the video (4 min 14 sec)
Pain
Enhance the mobile leaderboard by removing the word 'total' from points, adding commas to numbers, displaying a tagline, showing time since last refresh, and implementing a scrolling feature to display more users.
Acceptance Criteria
- Remove the word 'total' from the points display.
- Add commas to numbers in the points display (e.g., 11,535).
- Display the app's tagline next to the 'Rewards (Mobile app)' title.
- Show the time since the last refresh and a countdown to the next refresh.
- Implement a scrolling feature to cycle through the leaderboard, showing more users over time.
- Allow a setting to adjust the number of users displayed at once, with a default of showing the top 30.
Website: https://rewards.ssw.com.au/kiosk-leaderboard
Screenshot
Figure: Leaderboard should cycle through all entries like airport flight displays.</issue_description>
<agent_instructions>> 5. Implement a scrolling feature to cycle through the leaderboard, showing more users over time. It should only go until the last page of users with points. For instance, if we show 30 users and 35 users have points for the given leaderboard range, we only show 2 pages.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
@jernejk The v2 video is here: https://www.youtube.com/watch?v=gP0OqRGbg_MOriginal issue related to this: SSWConsulting/SSW.Rewards.Mobile#1341 </comment_new> <comment_new>
@jernejk
- Implement a scrolling feature to cycle through the leaderboard, showing more users over time.
It should only go until the last page of users with points. For instance, if we show 30 users and 35 users have points for the given leaderboard range, we only show 2 pages.</comment_new>
- Fixes SSWConsulting/SSW.Rewards.Mobile#1442
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
Verify against original transcript of the request:
Um, this is an excellent video, JK. This kind of shows you what it is and what you need. Um, a couple of small pieces of feedback. First of all, I would show this to uh somebody in the team and get a test pass before the sprint review and then get me to watch it before the sprint review. Uh in terms of the total points, I would get rid of the word total and just say points and then I would have commas in the numbers. So you know 11, 535 or you know 12, 100. So uh that would be better. Um in terms of the um the SSW rewards, I would put the tagline whatever the tagline is next to it. So it's at the top and last refreshed you need to do rather than last updated I'd say you can keep it but um but what you've got the time there but you don't have how long away how long ago it was. So last refreshed you can have the time and then go in brackets refreshing in 45 seconds 44 seconds 43. So people hang around until it's refreshed again. And the other thing is I would have a setting that shows how many you're showing. So you're showing 10 there, but you might have the setting to show 30. Show it shows 10 and it flashes away and shows, you know, 20 to, you know, 10 to 20 and then it flashes away. The same thing as when you're at an airport. When you're at an airport, you see the current flights and then you see the flights later cuz it it and then you see the flights even further away and then it goes back to the current flights. You know how it it scrolls through three times. Something like that. So you can get to see the top. You can everybody can get to see where their name is cuz everybody just wants to look at their own name where they are and they want to know well I just scanned another person where how many people do they just jump that type of thing. All right. So so if I understand correctly uh what you would like is to change pages uh over time so uh people can see themselves. Um, yes, like an airport. So, just re refresh through the list, the entire list. By default, you can. If if you want to make make a setting so they only go through the top 20 or the top 30, you can. I I wouldn't bother with it personally cuz I I would just refresh everybody. I'd show everybody and just cycle through however many. But you can imagine if there's 200, maybe they only want to show the top 30. Yeah. Right now we have uh here it says 1,1200 but we have over 2,000 now and it's growing with each conference. No I think yeah just show just you can hardcode it to the top 30. I think that's fine. Yeah I can try to have a chat feed back and try to uh figure out how to update the design. Cool. Do you have all that feedback JK? You guys happy for us to move on? Yeah. And then we'll take that offline and work on it. Yeah, and I did send to uh Seth uh this video before, so that's why uh we quickly checked if we should uh do the video or not. Okay, no problems. All right, I'll take back over the screen share and back to the back to the review. Thanks JK for that.
@copilot Um, this is an excellent video, JK. This kind of shows you what it is and what you need. Um, a couple of small pieces of feedback. First of all, I would show this to uh somebody in the team and get a test pass before the sprint review and then get me to watch it before the sprint review. Uh in terms of the total points, I would get rid of the word total and just say points and then I would have commas in the numbers. So you know 11, 535 or you know 12, 100. So uh that would be better. Um in terms of the um the SSW rewards, I would put the tagline whatever the tagline is next to it. So it's at the top and last refreshed you need to do rather than last updated I'd say you can keep it but um but what you've got the time there but you don't have how long away how long ago it was. So last refreshed you can have the time and then go in brackets refreshing in 45 seconds 44 seconds 43. So people hang around until it's refreshed again. And the other thing is I would have a setting that shows how many you're showing. So you're showing 10 there, but you might have the setting to show 30. Show it shows 10 and it flashes away and shows, you know, 20 to, you know, 10 to 20 and then it flashes away. The same thing as when you're at an airport. When you're at an airport, you see the current flights and then you see the flights later cuz it it and then you see the flights even further away and then it goes back to the current flights. You know how it it scrolls through three times. Something like that. So you can get to see the top. You can everybody can get to see where their name is cuz everybody just wants to look at their own name where they are and they want to know well I just scanned another person where how many people do they just jump that type of thing. All right. So so if I understand correctly uh what you would like is to change pages uh over time so uh people can see themselves. Um, yes, like an airport. So, just re refresh through the list, the entire list. By default, you can. If if you want to make make a setting so they only go through the top 20 or the top 30, you can. I I wouldn't bother with it personally cuz I I would just refresh everybody. I'd show everybody and just cycle through however many. But you can imagine if there's 200, maybe they only want to show the top 30. Yeah. Right now we have uh here it says 1,1200 but we have over 2,000 now and it's growing with each conference. No I think yeah just show just you can hardcode it to the top 30. I think that's fine. Yeah I can try to have a chat feed back and try to uh figure out how to update the design. Cool. Do you have all that feedback JK? You guys happy for us to move on? Yeah. And then we'll take that offline and work on it. Yeah, and I did send to uh Seth uh this video before, so that's why uh we quickly checked if we should uh do the video or not. Okay, no problems. All right, I'll take back over the screen share and back to the back to the review. Thanks JK for that.
@copilot Um, this is an excellent video, JK. This kind of shows you what it is and what you need. Um, a couple of small pieces...
Updated the wording to match the transcript exactly in commit f6248b1:
Changes made:
- Changed "Last updated" → "Last refreshed"
- Changed "Next refresh in: X seconds" → "(refreshing in X seconds)"
Now displays: Last refreshed: 2 minutes ago (refreshing in 45 seconds)
All other requirements from the transcript are already implemented: ✅ Removed "total" from points column ✅ Added commas to numbers (11,535) ✅ Tagline below logo ✅ Auto-scrolling like airport displays (10-second intervals) ✅ Hardcoded to show top 30 users ✅ Cycles only through pages with users having points
Display format:
Last refreshed: 2 minutes ago (refreshing in 45 seconds)
The countdown updates every second (45, 44, 43...) as requested.