Settings style (#808)

apps/client/src/features/app-settings/AppSettings.tsx

@@ -32,10 +32,10 @@ export default function AppSettings() {
         <PanelContent onClose={closeSettings}>
           {selectedPanel === 'project' && <ProjectPanel />}
           {selectedPanel === 'general' && <GeneralPanel />}
+          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
           {selectedPanel === 'sources' && <SourcesPanel />}
           {selectedPanel === 'interface' && <InterfacePanel />}
           {selectedPanel === 'integrations' && <IntegrationsPanel />}
-          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
           {selectedPanel === 'about' && <AboutPanel />}
           {selectedPanel === 'log' && <LogPanel />}
         </PanelContent>

apps/client/src/features/app-settings/panel/Panel.module.scss

@@ -98,7 +98,7 @@ $inner-padding: 1rem;
 }
 
 .listGroup {
-  padding: 1rem 2rem 0 2rem;
+  padding: 0 2rem;
 
   > li:not(:last-child) {
     border-bottom: 1px solid $white-10;
@@ -130,23 +130,22 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
+  z-index: 999;
 }
 
-$loader-size: 4rem;
-
 .overlay {
   position: absolute;
   z-index: 10;
-  width: calc(100% - 2rem);
-  left: 1rem;
-  height: calc(80% - 1rem);
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
   display: grid;
   place-content: center;
-  backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.01);
+  background-color: $black-10;
 }
 
 .loader {
+  $loader-size: 4rem;
   width: $loader-size;
   height: $loader-size;
   background: $blue-500;

apps/client/src/features/app-settings/panel/PanelUtils.tsx

@@ -82,10 +82,13 @@ export function Divider() {
   return <hr className={style.divider} />;
 }
 
-export function Loader() {
+export function Loader({ isLoading }: { isLoading: boolean }) {
+  if (!isLoading) {
+    return null;
+  }
   return (
     <div className={style.overlay}>
-      <span className={style.loader} />
+      <div className={style.loader} />
     </div>
   );
 }

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -59,6 +59,8 @@ export default function GeneralPanelForm() {
     reset(data);
   };
 
+  const isLoading = status === 'pending';
+
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='app-settings'>
       <Panel.Card>
@@ -82,76 +84,79 @@ export default function GeneralPanelForm() {
         </Panel.SubHeader>
         {submitError && <Panel.Error>{submitError}</Panel.Error>}
         <Panel.Divider />
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Ontime server port'
-              description='Port ontime server listens in. Defaults to 4001 (needs app restart)'
-              error={errors.serverPort?.message}
-            />
-            <Input
-              id='serverPort'
-              size='sm'
-              type='number'
-              variant='ontime-filled'
-              maxLength={5}
-              width='75px'
-              {...register('serverPort', {
-                required: { value: true, message: 'Required field' },
-                max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                pattern: {
-                  value: isOnlyNumbers,
-                  message: 'Value should be numeric',
-                },
-              })}
-            />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Editor pin code'
-              description='Protect the editor view with a pin code'
-              error={errors.editorKey?.message}
-            />
-            <GeneralPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Operator pin code'
-              description='Protect the operator and cuesheet views with a pin code'
-              error={errors.operatorKey?.message}
-            />
-            <GeneralPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Time format'
-              description='Default time format to show in views 12 /24 hours'
-              error={errors.timeFormat?.message}
-            />
-            <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('timeFormat')}>
-              <option value='12'>12 hours 11:00:10 PM</option>
-              <option value='24'>24 hours 23:00:10</option>
-            </Select>
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Views language'
-              description='Language to be displayed in views'
-              error={errors.language?.message}
-            />
-            <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('language')}>
-              <option value='en'>English</option>
-              <option value='fr'>French</option>
-              <option value='de'>German</option>
-              <option value='it'>Italian</option>
-              <option value='no'>Norwegian</option>
-              <option value='pt'>Portuguese</option>
-              <option value='es'>Spanish</option>
-              <option value='sv'>Swedish</option>
-            </Select>
-          </Panel.ListItem>
-        </Panel.ListGroup>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Ontime server port'
+                description='Port ontime server listens in. Defaults to 4001 (needs app restart)'
+                error={errors.serverPort?.message}
+              />
+              <Input
+                id='serverPort'
+                size='sm'
+                type='number'
+                variant='ontime-filled'
+                maxLength={5}
+                width='75px'
+                {...register('serverPort', {
+                  required: { value: true, message: 'Required field' },
+                  max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                  min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                  pattern: {
+                    value: isOnlyNumbers,
+                    message: 'Value should be numeric',
+                  },
+                })}
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Editor pin code'
+                description='Protect the editor view with a pin code'
+                error={errors.editorKey?.message}
+              />
+              <GeneralPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Operator pin code'
+                description='Protect the operator and cuesheet views with a pin code'
+                error={errors.operatorKey?.message}
+              />
+              <GeneralPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Time format'
+                description='Default time format to show in views 12 /24 hours'
+                error={errors.timeFormat?.message}
+              />
+              <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('timeFormat')}>
+                <option value='12'>12 hours 11:00:10 PM</option>
+                <option value='24'>24 hours 23:00:10</option>
+              </Select>
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Views language'
+                description='Language to be displayed in views'
+                error={errors.language?.message}
+              />
+              <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('language')}>
+                <option value='en'>English</option>
+                <option value='fr'>French</option>
+                <option value='de'>German</option>
+                <option value='it'>Italian</option>
+                <option value='no'>Norwegian</option>
+                <option value='pt'>Portuguese</option>
+                <option value='es'>Spanish</option>
+                <option value='sv'>Swedish</option>
+              </Select>
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/general-panel/UrlPresetsForm.tsx

@@ -84,11 +84,11 @@ export default function UrlPresetsForm() {
     });
   };
 
-  const isPending = status === 'pending';
+  const isLoading = status === 'pending';
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testId='url-preset-form'>
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testid='url-preset-form'>
       <Panel.Card>
         <Panel.SubHeader>
           URL Presets
@@ -102,21 +102,21 @@ export default function UrlPresetsForm() {
           </div>
         </Panel.SubHeader>
         <Panel.Divider />
-        {isPending && <Panel.Loader />}
+        <Alert status='info' variant='ontime-on-dark-info'>
+          <AlertIcon />
+          <AlertDescription>
+            URL Presets
+            <br />
+            <br />
+            Custom presets allow providing a short name for any ontime URL. <br />
+            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
+            <br />
+            <br />
+            <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
+          </AlertDescription>
+        </Alert>
         <Panel.Section>
-          <Alert status='info' variant='ontime-on-dark-info'>
-            <AlertIcon />
-            <AlertDescription>
-              URL Presets
-              <br />
-              <br />
-              Custom presets allow providing a short name for any ontime URL. <br />
-              - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
-              <br />
-              <br />
-              <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
-            </AlertDescription>
-          </Alert>
+          <Panel.Loader isLoading={isLoading} />
           <Panel.Title>
             Manage presets
             <Button variant='ontime-subtle' rightIcon={<IoAdd />} size='sm' onClick={addNew}>

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -16,8 +16,8 @@ import style from './GeneralPanel.module.scss';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettingsForm() {
-  const { data, status, refetch, isFetching } = useViewSettings();
-  const { data: info, isFetching: isFetchingInfo } = useInfo();
+  const { data, status, refetch } = useViewSettings();
+  const { data: info, status: infoStatus } = useInfo();
 
   const {
     control,
@@ -64,7 +64,7 @@ export default function ViewSettingsForm() {
     return null;
   }
 
-  const disableInputs = status === 'pending';
+  const isLoading = status === 'pending' || infoStatus === 'pending';
 
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='view-settings'>
@@ -81,55 +81,56 @@ export default function ViewSettingsForm() {
           </div>
         </Panel.SubHeader>
         <Panel.Divider />
-        {isFetching || isFetchingInfo ? <Panel.Loader /> : null}
-        <Panel.ListGroup>
-          <Alert status='info' variant='ontime-on-dark-info'>
-            <AlertIcon />
-            <AlertDescription>
-              You can override the styles of the viewers with a custom CSS file. <br />
-              {info?.cssOverride && `In your installation the file is at ${info?.cssOverride}`}
-              <br />
-              <br />
-              <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
-            </AlertDescription>
-          </Alert>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Override CSS styles'
-              description='Enables overriding view styles with custom stylesheet'
-            />
-            <Switch {...register('overrideStyles')} variant='ontime' size='lg' />
-          </Panel.ListItem>
-        </Panel.ListGroup>
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field title='Timer colour' description='Default colour of a running timer' />
-            <PopoverPickerRHF name='normalColor' control={control} />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field title='Warning colour' description='Colour of a running timer in warning mode' />
-            <PopoverPickerRHF name='warningColor' control={control} />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field title='Danger colour' description='Colour of a running timer in danger mode' />
-            <PopoverPickerRHF name='dangerColor' control={control} />
-          </Panel.ListItem>
-        </Panel.ListGroup>
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field title='End message' description='If no end message is provided, timer will continue' />
-            <Input
-              size='sm'
-              autoComplete='off'
-              variant='ontime-filled'
-              maxLength={150}
-              width='275px'
-              placeholder='Message shown when timer reaches end'
-              isDisabled={disableInputs}
-              {...register('endMessage')}
-            />
-          </Panel.ListItem>
-        </Panel.ListGroup>
+        <Alert status='info' variant='ontime-on-dark-info'>
+          <AlertIcon />
+          <AlertDescription>
+            You can override the styles of the viewers with a custom CSS file. <br />
+            {info?.cssOverride && `In your installation the file is at ${info?.cssOverride}`}
+            <br />
+            <br />
+            <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
+          </AlertDescription>
+        </Alert>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Override CSS styles'
+                description='Enables overriding view styles with custom stylesheet'
+              />
+              <Switch {...register('overrideStyles')} variant='ontime' size='lg' />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='Timer colour' description='Default colour of a running timer' />
+              <PopoverPickerRHF name='normalColor' control={control} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Warning colour' description='Colour of a running timer in warning mode' />
+              <PopoverPickerRHF name='warningColor' control={control} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Danger colour' description='Colour of a running timer in danger mode' />
+              <PopoverPickerRHF name='dangerColor' control={control} />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='End message' description='If no end message is provided, timer will continue' />
+              <Input
+                size='sm'
+                autoComplete='off'
+                variant='ontime-filled'
+                maxLength={150}
+                width='275px'
+                placeholder='Message shown when timer reaches end'
+                {...register('endMessage')}
+              />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -16,7 +16,7 @@ import { cycles } from './integrationUtils';
 import style from './IntegrationsPanel.module.css';
 
 export default function HttpIntegrations() {
-  const { data } = useHttpSettings();
+  const { data, status } = useHttpSettings();
   const { mutateAsync } = usePostHttpSettings();
 
   const {
@@ -69,6 +69,7 @@ export default function HttpIntegrations() {
   };
 
   const canSubmit = !isSubmitting && isDirty && isValid;
+  const isLoading = status === 'pending';
 
   return (
     <Panel.Section>
@@ -93,6 +94,7 @@ export default function HttpIntegrations() {
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section as='form' id='http-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
+          <Panel.Loader isLoading={isLoading} />
           {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
           <Panel.ListGroup>
             <Panel.ListItem>

apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx

@@ -16,7 +16,7 @@ import { cycles } from './integrationUtils';
 import style from './IntegrationsPanel.module.css';
 
 export default function OscIntegrations() {
-  const { data } = useOscSettings();
+  const { data, status } = useOscSettings();
   const { mutateAsync } = useOscSettingsMutation();
 
   const {
@@ -75,6 +75,7 @@ export default function OscIntegrations() {
   };
 
   const canSubmit = !isSubmitting && isDirty && isValid;
+  const isLoading = status === 'pending';
 
   return (
     <Panel.Card>
@@ -100,6 +101,7 @@ export default function OscIntegrations() {
       <Panel.Divider />
 
       <Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
+        <Panel.Loader isLoading={isLoading} />
         <Panel.Title>OSC Settings</Panel.Title>
         {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -51,6 +51,7 @@ export default function ManageProjects() {
   const handleCloseForm = () => {
     setIsCreatingProject(false);
   };
+
   return (
     <Panel.Section>
       <Input

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -11,7 +11,7 @@ import * as Panel from '../PanelUtils';
 import style from './ProjectPanel.module.scss';
 
 export default function ProjectData() {
-  const { data, refetch } = useProjectData();
+  const { data, status, refetch } = useProjectData();
 
   const {
     handleSubmit,
@@ -45,9 +45,13 @@ export default function ProjectData() {
     }
   };
 
+  // populate with new data if we get an update
   const onReset = () => {
     reset(data);
   };
+
+  const isLoading = status === 'pending';
+
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
       <Panel.Card>
@@ -70,6 +74,7 @@ export default function ProjectData() {
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
           <label>
             Project title
             <Input