Skip to content

ZA | 25-SDC-JULY | Luke Manyamazi | Sprint 1 | Hashtag slowing down my browser#54

Closed
Luke-Manyamazi wants to merge 0 commit into
CodeYourFuture:mainfrom
Luke-Manyamazi:BR---Hashtag-slowing-down-my-browser
Closed

ZA | 25-SDC-JULY | Luke Manyamazi | Sprint 1 | Hashtag slowing down my browser#54
Luke-Manyamazi wants to merge 0 commit into
CodeYourFuture:mainfrom
Luke-Manyamazi:BR---Hashtag-slowing-down-my-browser

Conversation

@Luke-Manyamazi

@Luke-Manyamazi Luke-Manyamazi commented Nov 11, 2025

Copy link
Copy Markdown

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

  • Made hashtagView function async.
  • Awaited apiService.getBloomsByHashtag() before rendering.
  • Ensured blooms render only after data is loaded.
  • Fixed page flashing/blank screen when clicking hashtags.

Questions

None

@Luke-Manyamazi Luke-Manyamazi added 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Legacy-Code The name of the module. labels Nov 11, 2025

@illicitonion illicitonion left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you talk through what you think the root cause of this bug is and how this PR addresses that problem?

What symptoms do you think the user who reported the bug is seeing? How do they relate to what you're changing here?

@illicitonion illicitonion added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 20, 2026
@Luke-Manyamazi

Copy link
Copy Markdown
Author

Hi Daniel

This is waht I think:

  1. Root cause & how the PR fixes it
    Rendering happened before hashtag data was fully loaded, causing blank flashes and browser slowdown.

  2. User symptoms & relation to the change
    There was blank screens, lag, or freezing when clicking hashtags.

Fix:
Made hashtagView async and awaited the API call so rendering happens only after the data is ready, preventing unnecessary DOM updates and improving performance. By waiting for data before rendering, users now see content immediately and smoothly, eliminating both the visual flash and the slowness.

@Luke-Manyamazi Luke-Manyamazi added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 14, 2026

@illicitonion illicitonion left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still seeing issues on this page - if I load a hashtag page, and try to click on one of the links on the page or click logout, most of the time clicking doesn't do anything. It's like the browser is really busy doing something?

@illicitonion illicitonion removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 17, 2026
@Luke-Manyamazi

Copy link
Copy Markdown
Author

This change now updates hashtagView to fetch blooms only when the hashtag actually changes. It prevents duplicate API requests and ensures state.currentHashtag is correctly set. Looks good!

@Luke-Manyamazi Luke-Manyamazi added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 17, 2026
Comment thread front-end/views/hashtag.mjs Outdated
apiService.getBloomsByHashtag(hashtag);
const goodHashtag = hashtag.startsWith("#") ? hashtag : `#${hashtag}`;
if (state.currentHashtag !== goodHashtag) {
state.currentHashtag = goodHashtag;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you set the state here? It gets set by apiService.getBloomsByHashtag - by setting it here, you're opening up a race condition that if we render the screen while the blooms are loading, we'll show the new hashtag but the old hashtag's blooms.

@illicitonion illicitonion removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 25, 2026
@Luke-Manyamazi

Copy link
Copy Markdown
Author

"Hi Daniel, good catch. I've refactored hashtagView to be async and now await the apiService call.

This fixes the issues by:

Eliminating the Race Condition: By awaiting the data before calling render, the heading and the blooms list now update simultaneously.

Fixing Browser Lag: Removing the manual state update in the view prevents 'double-rendering' conflicts that were making the browser feel busy.

Single Source of Truth: The view now waits for apiService to update the state fully before rendering.

@Luke-Manyamazi Luke-Manyamazi added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Mar 7, 2026
@illicitonion

Copy link
Copy Markdown
Member

I think your previous fix was much more in line with what's expected here. With your latest change, if I open the network tab on the hashtag page I see lots and lots and lots of the same request, which is probably what's slowing down the browser. I don't think using async/await here stops there being lots and lots of requests?

@illicitonion illicitonion removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Mar 11, 2026
@Luke-Manyamazi Luke-Manyamazi force-pushed the BR---Hashtag-slowing-down-my-browser branch from 930b27c to 921f365 Compare April 17, 2026 08:44
@github-project-automation github-project-automation Bot moved this from Backlog to Done in Purple Forest Kanban Apr 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Module-Legacy-Code The name of the module. Reviewed Volunteer to add when completing a review with trainee action still to take. 📅 Sprint 1 Assigned during Sprint 1 of this module

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants