Improve loading: peers page (#840)

Convert /peers page to client components, so that we dont have to do a
round trip on every page visit. Converting it to client side rendering,
caches the page once it is loaded and we can load data via api. When
data is loading we show the loader. We also cache the data(via swr) and
refresh the data in background.

ui/app/peers/page.tsx

@@ -1,22 +1,23 @@
+'use client';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { LayoutMain } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
 import Link from 'next/link';
 import { Header } from '../../lib/Header';
-import { getTruePeer } from '../api/peers/route';
-import prisma from '../utils/prisma';
 import PeersTable from './peersTable';
 export const dynamic = 'force-dynamic';
 
-async function fetchPeers() {
-  const peers = await prisma.peers.findMany({});
-  return peers;
-}
+import { ProgressCircle } from '@/lib/ProgressCircle';
+
+import useSWR from 'swr';
+
+const fetcher = (...args: [any]) => fetch(...args).then((res) => res.json());
+
+export default function Peers() {
+  const { data: peers, error, isLoading } = useSWR('/api/peers', fetcher);
 
-export default async function Peers() {
-  let peers = await fetchPeers();
   return (
     <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
       <Panel>
@@ -41,10 +42,17 @@ export default async function Peers() {
         </Header>
       </Panel>
       <Panel>
-        <PeersTable
-          title='All peers'
-          peers={peers.map((peer) => getTruePeer(peer))}
-        />
+        {isLoading && (
+          <div className='h-screen flex items-center justify-center'>
+            <ProgressCircle variant='determinate_progress_circle' />
+          </div>
+        )}
+        {!isLoading && (
+          <PeersTable
+            title='All peers'
+            peers={peers.map((peer: any) => peer)}
+          />
+        )}
       </Panel>
     </LayoutMain>
   );