diff --git a/packages/agent-explore/src/plugins/profile/IdentifierHoverComponent.tsx b/packages/agent-explore/src/plugins/profile/IdentifierHoverComponent.tsx
index 177924f..19f9d32 100644
--- a/packages/agent-explore/src/plugins/profile/IdentifierHoverComponent.tsx
+++ b/packages/agent-explore/src/plugins/profile/IdentifierHoverComponent.tsx
@@ -19,11 +19,10 @@ type IProfileInfo = {
 
 export const IdentifierHoverComponent: React.FC<IIdentifierHoverComponentProps> = ({did}) => {
   const { agent } = useVeramo<IDataStoreORM>()
-  const [ profile, setProfile ] = useState<IProfileInfo>({})
   
-  const { data: profileCredentials } = useQuery(
+  const { data: profileCredentials, isLoading } = useQuery(
     [
-      'identifierPrileCredentials',
+      'identifierProfileCredentials',
       did,
       { agentId: agent?.context.name },
     ],
@@ -39,27 +38,30 @@ export const IdentifierHoverComponent: React.FC<IIdentifierHoverComponentProps>
       )
   )
 
-  useEffect(() => {
+  const profile = React.useMemo<IProfileInfo>(() => {
+    const profile: IProfileInfo = {}
     if (profileCredentials && profileCredentials.length > 0) {
-      const currentProfile = profile
       for (const credential of profileCredentials) {
         const { name, bio, email, picture, twitter, github } 
           = credential.verifiableCredential.credentialSubject
-        if (name) currentProfile.name = name
-        if (bio) currentProfile.bio = bio
-        if (email) currentProfile.email = email
-        if (picture) currentProfile.picture = picture
-        if (twitter) currentProfile.twitter = twitter
-        if (github) currentProfile.github = github
+        if (name) profile.name = name
+        if (bio) profile.bio = bio
+        if (email) profile.email = email
+        if (picture) profile.picture = picture
+        if (twitter) profile.twitter = twitter
+        if (github) profile.github = github
       }
-
-      setProfile(currentProfile)
     }
+    return profile
   }, [profileCredentials])
 
+
+  if (isLoading) return <Spin />
+
   return (
     <Space direction='vertical'>
       <Space direction='horizontal'>
+        {isLoading && <Spin />}
         {profile.picture && <Avatar src={profile.picture} size='large'/>}
         <Space direction='vertical'  style={{maxWidth: 300}}>
           {profile.name && <Typography.Text strong>{profile.name}</Typography.Text>}
diff --git a/packages/plugin/src/components/IdentifierPopover.tsx b/packages/plugin/src/components/IdentifierPopover.tsx
index 92c0e20..92d9b26 100644
--- a/packages/plugin/src/components/IdentifierPopover.tsx
+++ b/packages/plugin/src/components/IdentifierPopover.tsx
@@ -15,21 +15,24 @@ export const IdentifierPopover: React.FC<IdentifierProfileProps> = ({
 
   const { plugins } = usePlugins()
 
-  let components: React.FC<IIdentifierHoverComponentProps>[] = []
-  plugins.forEach((plugin) => {
-    if (plugin.config?.enabled && plugin.getIdentifierHoverComponent) {
-      const Component = plugin.getIdentifierHoverComponent()
-      if (Component) {
-        components.push(Component)
+  const hoverComponents = React.useMemo(() => {
+    let components: React.FC<IIdentifierHoverComponentProps>[] = []
+    plugins.forEach((plugin) => {
+      if (plugin.config?.enabled && plugin.getIdentifierHoverComponent) {
+        const Component = plugin.getIdentifierHoverComponent()
+        if (Component) {
+          components.push(Component)
+        }
       }
-    }
-  })
+    })
+    return components
+  }, [plugins])
 
   return (
     <Popover 
       content={
       <Space direction='vertical'>
-        {components.map((Component, index) => (
+        {hoverComponents.map((Component, index) => (
           React.createElement(Component, { key: index, did: did })
         ))}
         <Typography.Text type="secondary">