From 5bc8d22d0b3be6dab1575b398504c52a3e2f6453 Mon Sep 17 00:00:00 2001
From: Abdallah Bahrawi <140177728+abdallahbahrawi1@users.noreply.github.com>
Date: Sun, 17 Aug 2025 21:16:22 +0300
Subject: [PATCH] fix: implement lazy loading for flag images and clean CSS
 (#1843)

## Description:

Flags are now only rendered and fetched when the modal is actually
opened
Additionally, duplicate Tailwind CSS classes have been cleaned up.

## Please complete the following:

- [x] I have added screenshots for all UI updates
No visible UI changes
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
No new user-facing text
- [x] I have added relevant tests to the test directory
No new tests needed for this UI rendering change.
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

abodcraft1
---
 src/client/FlagInputModal.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index 0c42bb71f..84da9f855 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -10,6 +10,7 @@ export class FlagInputModal extends LitElement {
   };
 
   @state() private search = "";
+  @state() private isModalOpen = false;
 
   createRenderRoot() {
     return this;
@@ -19,10 +20,11 @@ export class FlagInputModal extends LitElement {
     return html`
       <o-modal title="Flag Selector Modal" alwaysMaximized>
         <input
-          class="h-[2rem] border-none text-center border border-gray-300
+          class="h-[2rem] border-none border border-gray-300
           rounded-xl shadow-sm text-2xl text-center focus:outline-none
           focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black
           dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
+
           type="text"
           placeholder="Search..."
           @change=${this.handleSearch}
@@ -31,7 +33,7 @@ export class FlagInputModal extends LitElement {
         <div
           class="flex flex-wrap justify-evenly gap-[1rem] overflow-y-auto overflow-x-hidden h-[90%]"
         >
-          ${Countries.filter(
+          ${this.isModalOpen ? Countries.filter(
             (country) =>
               country.name.toLowerCase().includes(this.search.toLowerCase()) ||
               country.code.toLowerCase().includes(this.search.toLowerCase()),
@@ -61,7 +63,7 @@ export class FlagInputModal extends LitElement {
                 <span class="country-name">${country.name}</span>
               </button>
             `,
-          )}
+          ) : html``}
         </div>
       </o-modal>
     `;
@@ -83,9 +85,11 @@ export class FlagInputModal extends LitElement {
   }
 
   public open() {
+    this.isModalOpen = true;
     this.modalEl?.open();
   }
   public close() {
+    this.isModalOpen = false;
     this.modalEl?.close();
   }