redesign

frontend/package.json

@@ -15,8 +15,11 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.4",
     "axios": "^1.8.4",
+    "framer-motion": "^12.7.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-force-graph-2d": "^1.27.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.5.0",
     "tailwindcss": "^4.1.4",
     "ts-node": "^10.9.2",

frontend/src/components/layout/Header.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
+import { FaUser, FaSignOutAlt, FaNetworkWired } from 'react-icons/fa';
 
 const Header: React.FC = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleLogout = async () => {
     try {
@@ -15,41 +17,80 @@ const Header: React.FC = () => {
     }
   };
 
-  return (
-    <header className="bg-blue-600 text-white shadow-md">
-      <div className="container mx-auto py-4 px-6 flex justify-between items-center">
-        <Link to="/" className="text-xl font-bold">
-          Friendship Network
-        </Link>
+  // Check if we're on the login or register page
+  const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
 
-        <nav>
-          {user ? (
-            <div className="flex items-center space-x-4">
-              <span>Hello, {user.username}</span>
-              <Link to="/networks" className="hover:underline">
-                My Networks
-              </Link>
-              <button
-                onClick={handleLogout}
-                className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
-              >
-                Logout
-              </button>
-            </div>
-          ) : (
-            <div className="space-x-4">
-              <Link to="/login" className="hover:underline">
-                Login
-              </Link>
-              <Link
-                to="/register"
-                className="bg-white text-blue-600 hover:bg-gray-100 font-bold py-1 px-3 rounded"
-              >
-                Register
-              </Link>
-            </div>
-          )}
-        </nav>
+  if (isAuthPage) {
+    return null; // Don't show header on auth pages
+  }
+
+  return (
+    <header className="bg-slate-800 border-b border-slate-700 shadow-md">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <Link to="/" className="flex-shrink-0 flex items-center">
+              <FaNetworkWired className="h-6 w-6 text-indigo-400" />
+              <span className="ml-2 text-white font-bold text-xl">RelNet</span>
+            </Link>
+            
+            {user && (
+              <nav className="ml-8 flex space-x-4">
+                <Link 
+                  to="/networks" 
+                  className={`px-3 py-2 rounded-md text-sm font-medium ${
+                    location.pathname.includes('/networks') 
+                      ? 'bg-slate-700 text-white' 
+                      : 'text-slate-300 hover:bg-slate-700 hover:text-white'
+                  } transition-colors duration-200 flex items-center`}
+                >
+                  <FaNetworkWired className="mr-1" /> Networks
+                </Link>
+              </nav>
+            )}
+          </div>
+          
+          <div className="flex items-center">
+            {user ? (
+              <div className="flex items-center space-x-4">
+                <div className="text-sm text-indigo-300 hidden md:block">
+                  Hello, {user.username}
+                </div>
+                <div className="relative group">
+                  <button className="flex text-slate-300 hover:text-white items-center focus:outline-none">
+                    <div className="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center">
+                      <FaUser />
+                    </div>
+                  </button>
+                  
+                  <div className="absolute right-0 mt-2 w-48 bg-slate-800 rounded-md shadow-lg py-1 z-10 border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
+                    <button
+                      onClick={handleLogout}
+                      className="w-full text-left px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 flex items-center"
+                    >
+                      <FaSignOutAlt className="mr-2" /> Sign out
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex space-x-2">
+                <Link
+                  to="/login"
+                  className="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+                >
+                  Log in
+                </Link>
+                <Link
+                  to="/register"
+                  className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+                >
+                  Sign up
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
     </header>
   );

frontend/src/components/networks/NetworkList.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { useNetworks } from '../../context/NetworkContext';
 import { useAuth } from '../../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FaPlus, FaNetworkWired, FaTrash, FaEye, FaGlobe, FaLock, FaTimes } from 'react-icons/fa';
 
 const NetworkList: React.FC = () => {
   const { networks, loading, error, createNetwork, deleteNetwork } = useNetworks();
@@ -59,214 +61,283 @@ const NetworkList: React.FC = () => {
     }
   };
 
+  // Filter networks by ownership
+  const myNetworks = networks.filter(network => {
+    if (!user) return false;
+    const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id;
+    return ownerId === user.id;
+  });
+
+  const publicNetworks = networks.filter(network => {
+    if (!user) return false;
+    const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id;
+    return ownerId !== user.id;
+  });
+
   if (loading) {
-    return <div className="flex justify-center p-8">Loading networks...</div>;
+    return (
+      <div className="flex justify-center items-center h-screen bg-slate-900">
+        <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-indigo-500"></div>
+      </div>
+    );
   }
 
   return (
-    <div className="container mx-auto p-6">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">My Networks</h1>
-        <button
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-          onClick={() => setShowCreateForm(!showCreateForm)}
-        >
-          {showCreateForm ? 'Cancel' : 'Create New Network'}
-        </button>
-      </div>
-
-      {error && (
-        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-          {error}
+    <div className="bg-slate-900 min-h-screen text-white p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-2xl font-bold text-indigo-400">
+            <FaNetworkWired className="inline-block mr-2" />
+            My Networks
+          </h1>
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg
+              shadow-lg transition-colors duration-200 flex items-center"
+            onClick={() => setShowCreateForm(!showCreateForm)}
+          >
+            {showCreateForm ? <FaTimes className="mr-2" /> : <FaPlus className="mr-2" />}
+            {showCreateForm ? 'Cancel' : 'Create New Network'}
+          </motion.button>
         </div>
-      )}
 
-      {/* Create Network Form */}
-      {showCreateForm && (
-        <div className="bg-gray-100 p-4 rounded-lg mb-6">
-          <h2 className="text-xl font-semibold mb-4">Create New Network</h2>
-
-          {formError && (
-            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-              {formError}
-            </div>
-          )}
-
-          <form onSubmit={handleCreateNetwork}>
-            <div className="mb-4">
-              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
-                Network Name *
-              </label>
-              <input
-                id="name"
-                type="text"
-                className="w-full px-3 py-2 border border-gray-300 rounded"
-                value={newNetworkName}
-                onChange={e => setNewNetworkName(e.target.value)}
-                required
-              />
-            </div>
-
-            <div className="mb-4">
-              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="description">
-                Description (Optional)
-              </label>
-              <textarea
-                id="description"
-                className="w-full px-3 py-2 border border-gray-300 rounded"
-                value={newNetworkDescription}
-                onChange={e => setNewNetworkDescription(e.target.value)}
-                rows={3}
-              />
-            </div>
-
-            <div className="mb-4">
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  className="mr-2"
-                  checked={isPublic}
-                  onChange={e => setIsPublic(e.target.checked)}
-                />
-                <span className="text-gray-700 text-sm font-bold">Make this network public</span>
-              </label>
-            </div>
-
-            <button
-              type="submit"
-              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
-              disabled={createLoading}
-            >
-              {createLoading ? 'Creating...' : 'Create Network'}
-            </button>
-          </form>
-        </div>
-      )}
-
-      {/* Networks List */}
-      {networks.length === 0 ? (
-        <div className="bg-white p-8 rounded-lg text-center">
-          <p className="text-gray-600 mb-4">You don't have any networks yet.</p>
-          {!showCreateForm && (
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              onClick={() => setShowCreateForm(true)}
-            >
-              Create Your First Network
-            </button>
-          )}
-        </div>
-      ) : (
-        <>
-          {/* My Networks Section */}
-          <div className="mb-8">
-            <h2 className="text-xl font-semibold mb-4">My Networks</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {networks
-                .filter(network => {
-                  if (!user) return false;
-                  const ownerId =
-                    typeof network.owner === 'string' ? network.owner : network.owner._id;
-                  return ownerId === user.id;
-                })
-                .map(network => (
-                  <div key={network._id} className="bg-white rounded-lg shadow-md overflow-hidden">
-                    <div className="p-4">
-                      <h2 className="text-xl font-bold mb-2">{network.name}</h2>
-                      {network.description && (
-                        <p className="text-gray-600 mb-4">{network.description}</p>
-                      )}
-                      <div className="flex items-center mb-4">
-                        <span
-                          className={`px-2 py-1 rounded-full text-xs ${network.isPublic ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
-                        >
-                          {network.isPublic ? 'Public' : 'Private'}
-                        </span>
-                        <span className="text-xs text-gray-500 ml-2">
-                          Created: {new Date(network.createdAt).toLocaleDateString()}
-                        </span>
-                      </div>
-                      <div className="flex space-x-2">
-                        <button
-                          className="flex-1 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
-                          onClick={() => navigate(`/networks/${network._id}`)}
-                        >
-                          View
-                        </button>
-                        <button
-                          className="flex-1 bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded"
-                          onClick={() => handleDeleteNetwork(network._id)}
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-            </div>
-            {networks.filter(network => {
-              if (!user) return false;
-              const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id;
-              return ownerId === user.id;
-            }).length === 0 && (
-              <p className="text-gray-600 mb-4">You haven't created any networks yet.</p>
-            )}
+        {error && (
+          <div className="bg-red-900 border border-red-700 text-white px-4 py-3 rounded-lg mb-6">
+            {error}
           </div>
+        )}
 
-          {/* Public Networks Section */}
-          {networks.some(network => {
-            if (!user) return false;
-            const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id;
-            return ownerId !== user.id;
-          }) && (
+        {/* Create Network Form */}
+        <AnimatePresence>
+          {showCreateForm && (
+            <motion.div
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="bg-slate-800 p-6 rounded-lg shadow-xl mb-8 border border-slate-700"
+            >
+              <h2 className="text-xl font-semibold mb-4 text-indigo-300">Create New Network</h2>
+
+              {formError && (
+                <div className="bg-red-900 border border-red-700 text-white px-4 py-3 rounded-lg mb-4">
+                  {formError}
+                </div>
+              )}
+
+              <form onSubmit={handleCreateNetwork} className="space-y-4">
+                <div>
+                  <label className="block text-slate-300 text-sm font-medium mb-2" htmlFor="name">
+                    Network Name *
+                  </label>
+                  <input
+                    id="name"
+                    type="text"
+                    className="w-full px-3 py-2 bg-slate-700 border border-slate-600 text-white rounded-lg
+                      focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    value={newNetworkName}
+                    onChange={e => setNewNetworkName(e.target.value)}
+                    required
+                    placeholder="Enter network name"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-slate-300 text-sm font-medium mb-2" htmlFor="description">
+                    Description (Optional)
+                  </label>
+                  <textarea
+                    id="description"
+                    className="w-full px-3 py-2 bg-slate-700 border border-slate-600 text-white rounded-lg
+                      focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    value={newNetworkDescription}
+                    onChange={e => setNewNetworkDescription(e.target.value)}
+                    rows={3}
+                    placeholder="Describe your network"
+                  />
+                </div>
+
+                <div>
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      className="form-checkbox h-5 w-5 text-indigo-600 bg-slate-700 border-slate-600
+                        focus:ring-indigo-500 rounded"
+                      checked={isPublic}
+                      onChange={e => setIsPublic(e.target.checked)}
+                    />
+                    <span className="ml-2 text-slate-300 text-sm font-medium">Make this network public</span>
+                  </label>
+                </div>
+
+                <motion.button
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  type="submit"
+                  className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 
+                    rounded-lg shadow-md transition-colors duration-200 flex items-center justify-center"
+                  disabled={createLoading}
+                >
+                  {createLoading ? (
+                    <>
+                      <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white mr-2"></div>
+                      Creating...
+                    </>
+                  ) : (
+                    <>
+                      <FaPlus className="mr-2" /> Create Network
+                    </>
+                  )}
+                </motion.button>
+              </form>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Networks List */}
+        {networks.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="bg-slate-800 p-8 rounded-lg text-center border border-slate-700 shadow-xl"
+          >
+            <div className="flex justify-center mb-4">
+              <FaNetworkWired className="text-4xl text-slate-400" />
+            </div>
+            <p className="text-slate-300 mb-6">You don't have any networks yet.</p>
+            {!showCreateForm && (
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6
+                  rounded-lg shadow-lg transition-colors duration-200 flex items-center mx-auto"
+                onClick={() => setShowCreateForm(true)}
+              >
+                <FaPlus className="mr-2" /> Create Your First Network
+              </motion.button>
+            )}
+          </motion.div>
+        ) : (
+          <div className="space-y-12">
+            {/* My Networks Section */}
             <div>
-              <h2 className="text-xl font-semibold mb-4">Public Networks From Others</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {networks
-                  .filter(network => {
-                    if (!user) return false;
-                    const ownerId =
-                      typeof network.owner === 'string' ? network.owner : network.owner._id;
-                    return ownerId !== user.id;
-                  })
-                  .map(network => (
-                    <div
+              <h2 className="text-xl font-semibold mb-4 text-indigo-300 flex items-center">
+                <FaNetworkWired className="mr-2" /> My Networks ({myNetworks.length})
+              </h2>
+              
+              {myNetworks.length === 0 ? (
+                <p className="text-slate-400 bg-slate-800 p-4 rounded-lg border border-slate-700">
+                  You haven't created any networks yet.
+                </p>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {myNetworks.map(network => (
+                    <motion.div
                       key={network._id}
-                      className="bg-white rounded-lg shadow-md overflow-hidden border-l-4 border-green-500"
+                      whileHover={{ y: -5 }}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      className="bg-slate-800 rounded-lg shadow-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition-colors duration-200"
                     >
-                      <div className="p-4">
-                        <h2 className="text-xl font-bold mb-2">{network.name}</h2>
-                        {network.description && (
-                          <p className="text-gray-600 mb-4">{network.description}</p>
-                        )}
-                        <div className="flex items-center mb-4">
-                          <span className="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">
-                            Public
-                          </span>
-                          <span className="text-xs text-gray-500 ml-2">
-                            Created: {new Date(network.createdAt).toLocaleDateString()}
-                          </span>
-                          <span className="text-xs text-gray-500 ml-2">
-                            By:{' '}
-                            {typeof network.owner === 'string' ? 'Unknown' : network.owner.username}
-                          </span>
+                      <div className="p-6">
+                        <div className="flex justify-between items-start mb-2">
+                          <h3 className="text-xl font-bold text-white">{network.name}</h3>
+                          {network.isPublic ? (
+                            <FaGlobe className="text-green-400" title="Public" />
+                          ) : (
+                            <FaLock className="text-amber-400" title="Private" />
+                          )}
                         </div>
-                        <div className="flex space-x-2">
-                          <button
-                            className="w-full bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                        
+                        {network.description && (
+                          <p className="text-slate-300 mb-4 text-sm">{network.description}</p>
+                        )}
+                        
+                        <div className="text-xs text-slate-400 mb-6">
+                          Created: {new Date(network.createdAt).toLocaleDateString()}
+                        </div>
+                        
+                        <div className="flex space-x-3">
+                          <motion.button
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            className="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4
+                              rounded-lg transition-colors duration-200 flex items-center justify-center"
                             onClick={() => navigate(`/networks/${network._id}`)}
                           >
-                            View
-                          </button>
+                            <FaEye className="mr-2" /> View
+                          </motion.button>
+                          
+                          <motion.button
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            className="flex-1 bg-red-700 hover:bg-red-800 text-white py-2 px-4
+                              rounded-lg transition-colors duration-200 flex items-center justify-center"
+                            onClick={() => handleDeleteNetwork(network._id)}
+                          >
+                            <FaTrash className="mr-2" /> Delete
+                          </motion.button>
                         </div>
                       </div>
-                    </div>
+                    </motion.div>
                   ))}
-              </div>
+                </div>
+              )}
             </div>
-          )}
-        </>
-      )}
+
+            {/* Public Networks Section */}
+            {publicNetworks.length > 0 && (
+              <div>
+                <h2 className="text-xl font-semibold mb-4 text-indigo-300 flex items-center">
+                  <FaGlobe className="mr-2" /> Public Networks ({publicNetworks.length})
+                </h2>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {publicNetworks.map(network => (
+                    <motion.div
+                      key={network._id}
+                      whileHover={{ y: -5 }}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      className="bg-slate-800 rounded-lg shadow-xl overflow-hidden border border-slate-700 border-l-4 border-l-green-500"
+                    >
+                      <div className="p-6">
+                        <div className="flex justify-between items-start mb-2">
+                          <h3 className="text-xl font-bold text-white">{network.name}</h3>
+                          <FaGlobe className="text-green-400" title="Public" />
+                        </div>
+                        
+                        {network.description && (
+                          <p className="text-slate-300 mb-4 text-sm">{network.description}</p>
+                        )}
+                        
+                        <div className="flex justify-between mb-6">
+                          <span className="text-xs text-slate-400">
+                            Created: {new Date(network.createdAt).toLocaleDateString()}
+                          </span>
+                          <span className="text-xs font-medium text-green-400">
+                            By: {typeof network.owner === 'string' ? 'Unknown' : network.owner.username}
+                          </span>
+                        </div>
+                        
+                        <motion.button
+                          whileHover={{ scale: 1.05 }}
+                          whileTap={{ scale: 0.95 }}
+                          className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4
+                            rounded-lg transition-colors duration-200 flex items-center justify-center"
+                          onClick={() => navigate(`/networks/${network._id}`)}
+                        >
+                          <FaEye className="mr-2" /> View Network
+                        </motion.button>
+                      </div>
+                    </motion.div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

frontend/src/hooks/useFriendshipNetwork.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { Person, getPeople, addPerson, updatePerson, removePerson } from '../api/people';
 import {
   Relationship,
@@ -18,15 +18,21 @@ interface RelationshipEdge extends Relationship {
   id: string; // Alias for _id to work with the visualization
 }
 
+// Default poll interval in milliseconds (5 seconds)
+const DEFAULT_POLL_INTERVAL = 5000;
+
 // Custom hook to manage friendship network data
-export const useFriendshipNetwork = (networkId: string | null) => {
+export const useFriendshipNetwork = (networkId: string | null, pollInterval = DEFAULT_POLL_INTERVAL) => {
   const [people, setPeople] = useState<PersonNode[]>([]);
   const [relationships, setRelationships] = useState<RelationshipEdge[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const pollTimerRef = useRef<number | null>(null);
+  const lastPeopleUpdateRef = useRef<string>('');
+  const lastRelationshipsUpdateRef = useRef<string>('');
 
   // Load network data
-  const loadNetworkData = useCallback(async () => {
+  const loadNetworkData = useCallback(async (isPolling = false) => {
     if (!networkId) {
       setPeople([]);
       setRelationships([]);
@@ -35,7 +41,9 @@ export const useFriendshipNetwork = (networkId: string | null) => {
     }
 
     try {
-      setLoading(true);
+      if (!isPolling) {
+        setLoading(true);
+      }
       setError(null);
 
       // Fetch people and relationships in parallel
@@ -55,19 +63,149 @@ export const useFriendshipNetwork = (networkId: string | null) => {
         id: rel._id,
       }));
 
-      setPeople(peopleNodes);
-      setRelationships(relationshipEdges);
+      // Generate hashes to detect changes
+      const positionsHash = JSON.stringify(peopleNodes.map(p => ({ id: p.id, pos: p.position })));
+      const relationshipsHash = JSON.stringify(relationshipEdges.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })));
+      
+      // Handle people updates
+      const peopleChanged = positionsHash !== lastPeopleUpdateRef.current;
+      const relsChanged = relationshipsHash !== lastRelationshipsUpdateRef.current;
+      
+      // Update states only if data has changed or it's the initial load
+      if (peopleChanged || !isPolling) {
+        if (isPolling && people.length > 0) {
+          // During polling, only update nodes that have changed positions
+          const currentPeopleMap = new Map(people.map(p => [p.id, p]));
+          const updatedPeople = [...people];
+          let hasChanges = false;
+          
+          // Check for position changes
+          for (const newNode of peopleNodes) {
+            const currentNode = currentPeopleMap.get(newNode.id);
+            if (currentNode) {
+              const currentPos = currentNode.position;
+              const newPos = newNode.position;
+              
+              // Update if position changed
+              if (currentPos.x !== newPos.x || currentPos.y !== newPos.y) {
+                const idx = updatedPeople.findIndex(p => p.id === newNode.id);
+                if (idx !== -1) {
+                  updatedPeople[idx] = newNode;
+                  hasChanges = true;
+                }
+              }
+            } else {
+              // New node not in current state, add it
+              updatedPeople.push(newNode);
+              hasChanges = true;
+            }
+          }
+          
+          // Check for removed nodes
+          const newNodeIds = new Set(peopleNodes.map(p => p.id));
+          const removedNodes = updatedPeople.filter(p => !newNodeIds.has(p.id));
+          if (removedNodes.length > 0) {
+            const remainingPeople = updatedPeople.filter(p => newNodeIds.has(p.id));
+            updatedPeople.length = 0;
+            updatedPeople.push(...remainingPeople);
+            hasChanges = true;
+          }
+          
+          // Update state only if positions changed
+          if (hasChanges) {
+            setPeople(updatedPeople);
+          }
+        } else {
+          // Initial load or major change - set everything
+          setPeople(peopleNodes);
+        }
+        
+        lastPeopleUpdateRef.current = positionsHash;
+      }
+      
+      // Handle relationship updates similarly
+      if (relsChanged || !isPolling) {
+        if (isPolling && relationships.length > 0) {
+          // Check for changes in relationships
+          const currentRelsMap = new Map(relationships.map(r => [r.id, r]));
+          const updatedRels = [...relationships];
+          let hasRelChanges = false;
+          
+          // Add new or changed relationships
+          for (const newRel of relationshipEdges) {
+            const currentRel = currentRelsMap.get(newRel.id);
+            if (!currentRel) {
+              // New relationship
+              updatedRels.push(newRel);
+              hasRelChanges = true;
+            } else if (currentRel.type !== newRel.type || 
+                      currentRel.source !== newRel.source || 
+                      currentRel.target !== newRel.target) {
+              // Changed relationship
+              const idx = updatedRels.findIndex(r => r.id === newRel.id);
+              if (idx !== -1) {
+                updatedRels[idx] = newRel;
+                hasRelChanges = true;
+              }
+            }
+          }
+          
+          // Remove deleted relationships
+          const newRelIds = new Set(relationshipEdges.map(r => r.id));
+          const removedRels = updatedRels.filter(r => !newRelIds.has(r.id));
+          if (removedRels.length > 0) {
+            const remainingRels = updatedRels.filter(r => newRelIds.has(r.id));
+            updatedRels.length = 0;
+            updatedRels.push(...remainingRels);
+            hasRelChanges = true;
+          }
+          
+          if (hasRelChanges) {
+            setRelationships(updatedRels);
+          }
+        } else {
+          // Initial load or major change
+          setRelationships(relationshipEdges);
+        }
+        
+        lastRelationshipsUpdateRef.current = relationshipsHash;
+      }
     } catch (err: any) {
       setError(err.message || 'Failed to load network data');
       console.error('Error loading network data:', err);
     } finally {
-      setLoading(false);
+      if (!isPolling) {
+        setLoading(false);
+      }
     }
   }, [networkId]);
 
+  // Set up polling for network data
   useEffect(() => {
+    // Initial load
     loadNetworkData();
-  }, [loadNetworkData]);
+    
+    // Set up polling if interval is provided and > 0
+    if (networkId && pollInterval > 0) {
+      // Clear any existing timer
+      if (pollTimerRef.current) {
+        window.clearInterval(pollTimerRef.current);
+      }
+      
+      // Create new polling timer
+      pollTimerRef.current = window.setInterval(() => {
+        loadNetworkData(true);
+      }, pollInterval);
+    }
+    
+    // Cleanup function
+    return () => {
+      if (pollTimerRef.current) {
+        window.clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+    };
+  }, [loadNetworkData, networkId, pollInterval]);
 
   // Add a new person
   const createPerson = async (personData: {
@@ -81,7 +219,12 @@ export const useFriendshipNetwork = (networkId: string | null) => {
     try {
       const newPerson = await addPerson(networkId, personData);
       const newPersonNode: PersonNode = { ...newPerson, id: newPerson._id };
-      setPeople([...people, newPersonNode]);
+      const updatedPeople = [...people, newPersonNode];
+      setPeople(updatedPeople);
+      
+      // Update the reference hash to avoid unnecessary state updates on next poll
+      lastPeopleUpdateRef.current = JSON.stringify(updatedPeople.map(p => ({ id: p.id, pos: p.position })));
+      
       return newPersonNode;
     } catch (err: any) {
       setError(err.message || 'Failed to create person');
@@ -105,7 +248,16 @@ export const useFriendshipNetwork = (networkId: string | null) => {
       const updatedPerson = await updatePerson(networkId, personId, personData);
       const updatedPersonNode: PersonNode = { ...updatedPerson, id: updatedPerson._id };
 
-      setPeople(people.map(person => (person._id === personId ? updatedPersonNode : person)));
+      // Update the local state
+      const updatedPeople = people.map(person => 
+        (person._id === personId ? updatedPersonNode : person)
+      );
+      setPeople(updatedPeople);
+      
+      // Update the reference hash if position changed to avoid unnecessary state updates on next poll
+      if (personData.position) {
+        lastPeopleUpdateRef.current = JSON.stringify(updatedPeople.map(p => ({ id: p.id, pos: p.position })));
+      }
 
       return updatedPersonNode;
     } catch (err: any) {
@@ -122,12 +274,20 @@ export const useFriendshipNetwork = (networkId: string | null) => {
       await removePerson(networkId, personId);
 
       // Remove the person
-      setPeople(people.filter(person => person._id !== personId));
+      const updatedPeople = people.filter(person => person._id !== personId);
+      setPeople(updatedPeople);
 
       // Remove all relationships involving this person
-      setRelationships(
-        relationships.filter(rel => rel.source !== personId && rel.target !== personId)
+      const updatedRelationships = relationships.filter(
+        rel => rel.source !== personId && rel.target !== personId
       );
+      setRelationships(updatedRelationships);
+      
+      // Update both reference hashes to avoid unnecessary state updates on next poll
+      lastPeopleUpdateRef.current = JSON.stringify(updatedPeople.map(p => ({ id: p.id, pos: p.position })));
+      lastRelationshipsUpdateRef.current = JSON.stringify(updatedRelationships.map(r => 
+        ({ id: r.id, src: r.source, tgt: r.target, type: r.type })
+      ));
     } catch (err: any) {
       setError(err.message || 'Failed to delete person');
       throw err;
@@ -147,7 +307,14 @@ export const useFriendshipNetwork = (networkId: string | null) => {
       const newRelationship = await addRelationship(networkId, relationshipData);
       const newRelationshipEdge: RelationshipEdge = { ...newRelationship, id: newRelationship._id };
 
-      setRelationships([...relationships, newRelationshipEdge]);
+      const updatedRelationships = [...relationships, newRelationshipEdge];
+      setRelationships(updatedRelationships);
+      
+      // Update the relationship hash to avoid unnecessary state updates on next poll
+      lastRelationshipsUpdateRef.current = JSON.stringify(updatedRelationships.map(r => 
+        ({ id: r.id, src: r.source, tgt: r.target, type: r.type })
+      ));
+      
       return newRelationshipEdge;
     } catch (err: any) {
       setError(err.message || 'Failed to create relationship');
@@ -176,9 +343,15 @@ export const useFriendshipNetwork = (networkId: string | null) => {
         id: updatedRelationship._id,
       };
 
-      setRelationships(
-        relationships.map(rel => (rel._id === relationshipId ? updatedRelationshipEdge : rel))
+      const updatedRelationships = relationships.map(rel => 
+        (rel._id === relationshipId ? updatedRelationshipEdge : rel)
       );
+      setRelationships(updatedRelationships);
+      
+      // Update the relationship hash to avoid unnecessary state updates on next poll
+      lastRelationshipsUpdateRef.current = JSON.stringify(updatedRelationships.map(r => 
+        ({ id: r.id, src: r.source, tgt: r.target, type: r.type })
+      ));
 
       return updatedRelationshipEdge;
     } catch (err: any) {
@@ -193,7 +366,13 @@ export const useFriendshipNetwork = (networkId: string | null) => {
 
     try {
       await removeRelationship(networkId, relationshipId);
-      setRelationships(relationships.filter(rel => rel._id !== relationshipId));
+      const updatedRelationships = relationships.filter(rel => rel._id !== relationshipId);
+      setRelationships(updatedRelationships);
+      
+      // Update the relationship hash to avoid unnecessary state updates on next poll
+      lastRelationshipsUpdateRef.current = JSON.stringify(updatedRelationships.map(r => 
+        ({ id: r.id, src: r.source, tgt: r.target, type: r.type })
+      ));
     } catch (err: any) {
       setError(err.message || 'Failed to delete relationship');
       throw err;
@@ -205,6 +384,22 @@ export const useFriendshipNetwork = (networkId: string | null) => {
     await loadNetworkData();
   };
   
+  // Update the poll interval
+  const setPollInterval = (newInterval: number) => {
+    // Clear existing timer
+    if (pollTimerRef.current) {
+      window.clearInterval(pollTimerRef.current);
+      pollTimerRef.current = null;
+    }
+    
+    // Set up new timer if interval > 0
+    if (newInterval > 0 && networkId) {
+      pollTimerRef.current = window.setInterval(() => {
+        loadNetworkData(true);
+      }, newInterval);
+    }
+  };
+
   return {
     people,
     relationships,
@@ -217,5 +412,6 @@ export const useFriendshipNetwork = (networkId: string | null) => {
     updateRelationship: updateRelationshipData,
     deleteRelationship,
     refreshNetwork,
+    setPollInterval,
   };
 };