From c35d594e48d50db0d9c5bb42485080e002fe07d4 Mon Sep 17 00:00:00 2001
From: Luke Manyamazi <lukemanyamazi1@gmail.com>
Date: Tue, 11 Nov 2025 08:09:18 +0200
Subject: [PATCH] fixed: prevent hashtag page flicker by awaiting data fetch

---
 .gitignore                  |  4 ++++
 front-end/views/hashtag.mjs | 26 +++++++++++++++++---------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index e43b0f9..7c56e61 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
 .DS_Store
+venv/
+.venv/
+.env
+node_modules/
\ No newline at end of file
diff --git a/front-end/views/hashtag.mjs b/front-end/views/hashtag.mjs
index 7b7e996..22d3275 100644
--- a/front-end/views/hashtag.mjs
+++ b/front-end/views/hashtag.mjs
@@ -1,4 +1,4 @@
-import {renderOne, renderEach, destroy} from "../lib/render.mjs";
+import { renderOne, renderEach, destroy } from "../lib/render.mjs";
 import {
   state,
   apiService,
@@ -7,18 +7,21 @@ import {
   getTimelineContainer,
   getHeadingContainer,
 } from "../index.mjs";
-import {createLogin, handleLogin} from "../components/login.mjs";
-import {createLogout, handleLogout} from "../components/logout.mjs";
-import {createBloom} from "../components/bloom.mjs";
-import {createHeading} from "../components/heading.mjs";
+import { createLogin, handleLogin } from "../components/login.mjs";
+import { createLogout, handleLogout } from "../components/logout.mjs";
+import { createBloom } from "../components/bloom.mjs";
+import { createHeading } from "../components/heading.mjs";
 
-// Hashtag view: show all tweets containing this tag
+// Hashtag view: show all blooms containing this tag
 
-function hashtagView(hashtag) {
+async function hashtagView(hashtag) {
+  // Clear any existing content first
   destroy();
 
-  apiService.getBloomsByHashtag(hashtag);
+  // Wait for blooms related to this hashtag to be fetched before rendering
+  await apiService.getBloomsByHashtag(hashtag);
 
+  // Render logout section if user is logged in
   renderOne(
     state.isLoggedIn,
     getLogoutContainer(),
@@ -28,6 +31,8 @@ function hashtagView(hashtag) {
   document
     .querySelector("[data-action='logout']")
     ?.addEventListener("click", handleLogout);
+
+  // Render login section if user is not logged in
   renderOne(
     state.isLoggedIn,
     getLoginContainer(),
@@ -38,12 +43,15 @@ function hashtagView(hashtag) {
     .querySelector("[data-action='login']")
     ?.addEventListener("click", handleLogin);
 
+  // Render page heading
   renderOne(
     state.currentHashtag,
     getHeadingContainer(),
     "heading-template",
     createHeading
   );
+
+  // Render all blooms that contain the hashtag
   renderEach(
     state.hashtagBlooms || [],
     getTimelineContainer(),
@@ -52,4 +60,4 @@ function hashtagView(hashtag) {
   );
 }
 
-export {hashtagView};
+export { hashtagView };