feat(v4): Help center portal redesign improvements (#10349)

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
 import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
 
@@ -18,6 +21,8 @@ const props = defineProps({
 
 const addLocaleDialogRef = ref(null);
 
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
 const openAddLocaleDialog = () => {
   addLocaleDialogRef.value.dialogRef.open();
 };
@@ -43,7 +48,13 @@ const localeCount = computed(() => props.locales?.length);
       </div>
     </template>
     <template #content>
-      <LocaleList :locales="locales" :portal="portal" />
+      <div
+        v-if="isSwitchingPortal"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <LocaleList v-else :locales="locales" :portal="portal" />
     </template>
     <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
   </HelpCenterLayout>