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

@@ -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();
   }