Refactor CountryFlag component to use ClientOnly wrapper and improve placeholder styling

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;