implemented useMemo for loading state

src/components/ui/phone-input.jsx

@@ -64,6 +64,8 @@ const CountrySelect = ({
   const [searchValue, setSearchValue] = React.useState("")
   const [isOpen, setIsOpen] = React.useState(false)
 
+  const handleSelectComplete = React.useCallback(() => setIsOpen(false), [])
+
   return (
     <Popover
       open={isOpen}
@@ -123,7 +125,7 @@ const CountrySelect = ({
                       countryName={label}
                       selectedCountry={selectedCountry}
                       onChange={onChange}
-                      onSelectComplete={() => setIsOpen(false)}
+                      onSelectComplete={handleSelectComplete}
                     />
                   ) : null,
                 )}
@@ -136,23 +138,27 @@ const CountrySelect = ({
   )
 }
 
-const CountrySelectOption = ({
+const CountrySelectOption = React.memo(function CountrySelectOption({
   country,
   countryName,
   selectedCountry,
   onChange,
   onSelectComplete,
-}) => {
+}) {
   const handleSelect = () => {
     onChange(country)
     onSelectComplete()
   }
 
   return (
-    <CommandItem className="flex items-center justify-between gap-2" onSelect={handleSelect}>
+    <CommandItem
+      value={countryName}
+      className="flex items-center justify-between gap-2"
+      onSelect={handleSelect}
+    >
       <div className="flex items-center flex-1 gap-2">
         <FlagComponent country={country} countryName={countryName} />
-        <span className="text-sm truncate">{countryName}</span>
+        <span className="text-sm w-54 truncate">{countryName}</span>
       </div>
       <div className="whitespace-nowrap flex min-w-0">
         <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
@@ -162,9 +168,9 @@ const CountrySelectOption = ({
       </div>
     </CommandItem>
   )
-}
+})
 
-const FlagComponent = ({ country, countryName }) => {
+const FlagComponent = React.memo(function FlagComponent({ country, countryName }) {
   const Flag = flags[country]
 
   return (
@@ -172,6 +178,6 @@ const FlagComponent = ({ country, countryName }) => {
       {Flag && <Flag title={countryName} />}
     </span>
   )
-}
+})
 
 export { PhoneInput }