swr for servers on dash; fix whatever is going on with the spinner

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,44 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Server } from '@/api/server/getServer';
 import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
 import Spinner from '@/components/elements/Spinner';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
-import FlashMessageRender from '@/components/FlashMessageRender';
 import { useStoreState } from 'easy-peasy';
 import { usePersistedState } from '@/plugins/usePersistedState';
 import Switch from '@/components/elements/Switch';
 import tw from 'twin.macro';
+import useSWR from 'swr';
+import { PaginatedResult } from '@/api/http';
 
 export default () => {
-    const { addError, clearFlashes } = useFlash();
-    const [ servers, setServers ] = useState<Server[]>([]);
-    const [ loading, setLoading ] = useState(true);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { rootAdmin } = useStoreState(state => state.user.data!);
     const [ showAdmin, setShowAdmin ] = usePersistedState('show_all_servers', false);
 
-    const loadServers = () => {
-        clearFlashes();
-        setLoading(true);
-
-        getServers(undefined, showAdmin)
-            .then(data => setServers(data.items))
-            .catch(error => {
-                console.error(error);
-                addError({ message: httpErrorToHuman(error) });
-            })
-            .then(() => setLoading(false));
-    };
+    const { data: servers, error } = useSWR<PaginatedResult<Server>>(
+        [ '/api/client/servers', showAdmin ],
+        () => getServers(undefined, showAdmin)
+    );
 
     useEffect(() => {
-        loadServers();
-    }, [ showAdmin ]);
+        if (error) clearAndAddHttpError({ key: 'dashboard', error });
+        if (!error) clearFlashes('dashboard');
+    }, [ error ]);
 
     return (
-        <PageContentBlock>
-            <FlashMessageRender css={tw`mb-4`}/>
+        <PageContentBlock showFlashKey={'dashboard'}>
             {rootAdmin &&
             <div css={tw`mb-2 flex justify-end items-center`}>
                 <p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
@@ -51,14 +41,12 @@ export default () => {
                 />
             </div>
             }
-            {loading ?
+            {!servers ?
                 <Spinner centered size={'large'}/>
                 :
-                servers.length > 0 ?
-                    servers.map((server, index) => (
-                        <div key={server.uuid} css={index > 0 ? tw`mt-2` : undefined}>
-                            <ServerRow server={server}/>
-                        </div>
+                servers.items.length > 0 ?
+                    servers.items.map((server, index) => (
+                        <ServerRow key={server.uuid} server={server} css={index > 0 ? tw`mt-2` : undefined}/>
                     ))
                     :
                     <p css={tw`text-center text-sm text-neutral-400`}>