Start cleaning up the mess of useServer; make startup page update in real time

resources/scripts/components/elements/Can.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { usePermissions } from '@/plugins/usePermissions';
+import isEqual from 'react-fast-compare';
 
 interface Props {
     action: string | string[];
@@ -23,4 +24,4 @@ const Can = ({ action, matchAny = false, renderOnError, children }: Props) => {
     );
 };
 
-export default Can;
+export default memo(Can, isEqual);

resources/scripts/components/elements/ServerContentBlock.tsx

@@ -1,13 +1,13 @@
-import useServer from '@/plugins/useServer';
 import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock';
 import React from 'react';
+import { ServerContext } from '@/state/server';
 
 interface Props extends PageContentBlockProps {
     title: string;
 }
 
 const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
-    const { name } = useServer();
+    const name = ServerContext.useStoreState(state => state.server.data!.name);
 
     return (
         <PageContentBlock title={`${name} | ${title}`} {...props}>

resources/scripts/components/elements/Spinner.tsx

@@ -45,4 +45,10 @@ const Spinner = ({ centered, ...props }: Props) => (
 );
 Spinner.DisplayName = 'Spinner';
 
+Spinner.Size = {
+    SMALL: 'small' as SpinnerSize,
+    BASE: 'base' as SpinnerSize,
+    LARGE: 'large' as SpinnerSize,
+};
+
 export default Spinner;