From 633556effee725490fcffa290e076c42f80476ee 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)

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

- [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
regression is found:

abodcraft1
---
 src/client/FlagInputModal.ts | 60 ++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index 996da1028..777dd25b3 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -9,7 +9,8 @@ export class FlagInputModal extends LitElement {
     close: () => void;
   };
 
-  @state() private search: string = "";
+  @state() private search = "";
+  @state() private isModalOpen = false;
 
   createRenderRoot() {
     return this;
@@ -28,35 +29,38 @@ export class FlagInputModal extends LitElement {
         <div
           class="flex flex-wrap justify-evenly gap-[1rem] overflow-y-auto overflow-x-hidden h-[90%]"
         >
-          ${Countries.filter(
-            (country) => !country.restricted && this.includedInSearch(country),
-          ).map(
-            (country) => html`
-              <button
-                @click=${() => {
-                  this.setFlag(country.code);
-                  this.close();
-                }}
-                class="text-center cursor-pointer border-none bg-none opacity-70 
+          ${this.isModalOpen
+            ? Countries.filter(
+                (country) =>
+                  !country.restricted && this.includedInSearch(country),
+              ).map(
+                (country) => html`
+                  <button
+                    @click=${() => {
+                      this.setFlag(country.code);
+                      this.close();
+                    }}
+                    class="text-center cursor-pointer border-none bg-none opacity-70 
                   w-[calc(100%/2-15px)] sm:w-[calc(100%/4-15px)] 
                   md:w-[calc(100%/6-15px)] lg:w-[calc(100%/8-15px)] 
                   xl:w-[calc(100%/10-15px)] min-w-[80px]"
-              >
-                <img
-                  class="country-flag w-full h-auto"
-                  src="/flags/${country.code}.svg"
-                  @error=${(e: Event) => {
-                    const img = e.currentTarget as HTMLImageElement;
-                    const fallback = "/flags/xx.svg";
-                    if (img.src && !img.src.endsWith(fallback)) {
-                      img.src = fallback;
-                    }
-                  }}
-                />
-                <span class="country-name">${country.name}</span>
-              </button>
-            `,
-          )}
+                  >
+                    <img
+                      class="country-flag w-full h-auto"
+                      src="/flags/${country.code}.svg"
+                      @error=${(e: Event) => {
+                        const img = e.currentTarget as HTMLImageElement;
+                        const fallback = "/flags/xx.svg";
+                        if (img.src && !img.src.endsWith(fallback)) {
+                          img.src = fallback;
+                        }
+                      }}
+                    />
+                    <span class="country-name">${country.name}</span>
+                  </button>
+                `,
+              )
+            : html``}
         </div>
       </o-modal>
     `;
@@ -85,9 +89,11 @@ export class FlagInputModal extends LitElement {
   }
 
   public open() {
+    this.isModalOpen = true;
     this.modalEl?.open();
   }
   public close() {
+    this.isModalOpen = false;
     this.modalEl?.close();
   }