From 7fa2d2483c93e001204302821aaca5563617b36e Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 25 Sep 2024 14:35:39 +0800
Subject: [PATCH] improved locale selector tray

---
 addon/components/locale-selector-tray.hbs | 36 +++++++++++++----------
 addon/components/locale-selector-tray.js  |  6 +++-
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/addon/components/locale-selector-tray.hbs b/addon/components/locale-selector-tray.hbs
index 37ccaa8..c2a28dc 100644
--- a/addon/components/locale-selector-tray.hbs
+++ b/addon/components/locale-selector-tray.hbs
@@ -16,23 +16,27 @@
         </dd.Trigger>
         <dd.Content class="{{@contentClass}} locale-selector-tray-content {{if (media 'isMobile') 'is-mobile'}}">
             <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
-                {{#each-in this.availableLocales as |key country|}}
-                    <div class="px-1">
-                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
-                            <div class="flex flex-row items-center justify-between w-full">
-                                <div class="flex-1">
-                                    <span class="mr-1">{{country.emoji}}</span>
-                                    <span>{{country.language}}</span>
-                                </div>
-                                {{#if (eq this.currentLocale key)}}
-                                    <div>
-                                        <FaIcon @icon="check" class="text-green-400" />
+                {{#if this.loadAvailableCountries.isRunning}}
+                    <Spinner />
+                {{else}}
+                    {{#each-in this.availableLocales as |key country|}}
+                        <div class="px-1">
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
+                                <div class="flex flex-row items-center justify-between w-full">
+                                    <div class="flex-1">
+                                        <span class="mr-1">{{country.emoji}}</span>
+                                        <span>{{country.language}}</span>
                                     </div>
-                                {{/if}}
-                            </div>
-                        </a>
-                    </div>
-                {{/each-in}}
+                                    {{#if (eq this.currentLocale key)}}
+                                        <div>
+                                            <FaIcon @icon="check" class="text-green-400" />
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            </a>
+                        </div>
+                    {{/each-in}}
+                {{/if}}
             </div>
         </dd.Content>
     </BasicDropdown>
diff --git a/addon/components/locale-selector-tray.js b/addon/components/locale-selector-tray.js
index 68115b6..180de49 100644
--- a/addon/components/locale-selector-tray.js
+++ b/addon/components/locale-selector-tray.js
@@ -94,7 +94,11 @@ export default class LocaleSelectorTrayComponent extends Component {
      * @generator
      */
     @task *loadAvailableCountries() {
-        this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] });
+        this.countries = yield this.fetch.get(
+            'lookup/countries',
+            { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] },
+            { fromCache: true, expirationInterval: 1, expirationIntervalUnit: 'week' }
+        );
         this.availableLocales = this._createAvailableLocaleMap();
     }