nits

apps/www/components/Partners/PartnerApplicationForm.tsx

@@ -512,8 +512,7 @@ const PartnerApplicationForm: FC<Props> = ({ className }) => {
                         {isCheckingSlug && (
                           <div className="absolute right-3 top-1/2 -translate-y-1/2">
                             <Loader2
-                              className="h-4 w-4 text-foreground-lighter"
-                              style={{ animation: 'spin 1s linear infinite' }}
+                              className="h-4 w-4 text-foreground-lighter animate-spinner"
                             />
                           </div>
                         )}

apps/www/components/Supasquad/CountrySelector.tsx

@@ -1,11 +1,16 @@
 import {
   Select_Shadcn_ as Select,
   SelectContent_Shadcn_ as SelectContent,
+  SelectGroup_Shadcn_ as SelectGroup,
   SelectItem_Shadcn_ as SelectItem,
+  SelectLabel_Shadcn_ as SelectLabel,
   SelectTrigger_Shadcn_ as SelectTrigger,
   SelectValue_Shadcn_ as SelectValue,
 } from 'ui'
 
+// Common countries shown at the top
+const COMMON_COUNTRY_CODES = ['US', 'GB', 'CA', 'AU', 'DE', 'FR', 'NL', 'IN', 'BR', 'JP']
+
 // Country data with flags and names (alphabetically sorted)
 const countries = [
   { code: 'AF', name: 'Afghanistan', flag: '🇦🇫' },
@@ -168,6 +173,12 @@ export function CountrySelector({
   onValueChange,
   placeholder = 'Select your country',
 }: CountrySelectorProps) {
+  const commonCountries = COMMON_COUNTRY_CODES.map((code) =>
+    countries.find((c) => c.code === code)
+  ).filter(Boolean) as (typeof countries)[number][]
+
+  const otherCountries = countries.filter((c) => !COMMON_COUNTRY_CODES.includes(c.code))
+
   return (
     <Select value={value} onValueChange={onValueChange}>
       <SelectTrigger className="w-full !bg-foreground/[.026]">
@@ -181,11 +192,22 @@ export function CountrySelector({
         </SelectValue>
       </SelectTrigger>
       <SelectContent>
-        {countries.map((country) => (
-          <SelectItem key={country.code} value={country.code}>
-            <span className="flex items-center gap-2">{country.name}</span>
-          </SelectItem>
-        ))}
+        <SelectGroup>
+          <SelectLabel>Common</SelectLabel>
+          {commonCountries.map((country) => (
+            <SelectItem key={country.code} value={country.code}>
+              <span className="flex items-center gap-2">{country.name}</span>
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>All Countries</SelectLabel>
+          {otherCountries.map((country) => (
+            <SelectItem key={country.code} value={country.code}>
+              <span className="flex items-center gap-2">{country.name}</span>
+            </SelectItem>
+          ))}
+        </SelectGroup>
       </SelectContent>
     </Select>
   )