From b043648db690d3379096209e869c92a9f18c38c6 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 7 Aug 2025 21:22:01 +0200
Subject: [PATCH] Refactor CountryFlag component to use ClientOnly wrapper and
 improve placeholder styling

---
 components/CountryFlag.vue | 44 ++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/components/CountryFlag.vue b/components/CountryFlag.vue
index 51bceee..8520af9 100644
--- a/components/CountryFlag.vue
+++ b/components/CountryFlag.vue
@@ -1,11 +1,16 @@
 <template>
   <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
-    <CountryFlag
-      v-if="countryCode"
-      :country="countryCode"
-      :size="flagSize"
-      :title="getCountryName(countryCode)"
-    />
+    <ClientOnly>
+      <VueCountryFlag
+        v-if="countryCode"
+        :country="countryCode"
+        :size="flagSize"
+        :title="getCountryName(countryCode)"
+      />
+      <template #fallback>
+        <span class="flag-placeholder" :style="placeholderStyle">🏳️</span>
+      </template>
+    </ClientOnly>
     <span v-if="showName && countryCode" class="country-name">
       {{ getCountryName(countryCode) }}
     </span>
@@ -13,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { CountryFlag } from 'vue-country-flag-next';
+import VueCountryFlag from 'vue-country-flag-next';
 import { getCountryName } from '~/utils/countries';
 
 interface Props {
@@ -39,6 +44,25 @@ const flagSize = computed(() => {
   
   return sizeMap[props.size];
 });
+
+const placeholderStyle = computed(() => {
+  const sizeMap = {
+    small: '1rem',
+    medium: '1.5rem',
+    large: '2rem'
+  };
+  
+  return {
+    width: sizeMap[props.size],
+    height: props.square ? sizeMap[props.size] : `calc(${sizeMap[props.size]} * 0.75)`,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '2px',
+    backgroundColor: '#f5f5f5',
+    fontSize: '0.75rem'
+  };
+});
 </script>
 
 <style scoped>
@@ -63,6 +87,12 @@ const flagSize = computed(() => {
   font-size: 0.75rem;
 }
 
+.flag-placeholder {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
 /* Ensure proper flag display */
 :deep(.vue-country-flag) {
   border-radius: 2px;