fix forms stale (#419)

* feat: create loader component

* fix: prevent stale data in forms

apps/client/src/common/hooks-query/useAliases.ts

@@ -5,7 +5,7 @@ import { ALIASES } from '../api/apiConstants';
 import { getAliases } from '../api/ontimeApi';
 
 export default function useAliases() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: ALIASES,
     queryFn: getAliases,
     placeholderData: [],
@@ -15,5 +15,5 @@ export default function useAliases() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
-}
+  return { data, status, isFetching, isError, refetch };
+}

apps/client/src/common/hooks-query/useEventData.ts

@@ -6,7 +6,7 @@ import { fetchEventData } from '../api/eventDataApi';
 import { eventDataPlaceholder } from '../models/EventData';
 
 export default function useEventData() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: EVENT_DATA,
     queryFn: fetchEventData,
     placeholderData: eventDataPlaceholder,
@@ -16,5 +16,5 @@ export default function useEventData() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
+  return { data, status, isFetching, isError, refetch };
 }

apps/client/src/common/hooks-query/useOscSettings.ts

@@ -8,7 +8,7 @@ import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
 
 export default function useOscSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
     queryFn: getOSC,
     placeholderData: oscPlaceholderSettings,
@@ -19,7 +19,7 @@ export default function useOscSettings() {
   });
 
   // we need to jump through some hoops because of the type op port
-  return { data: data! as unknown as OSCSettings, status, isError, refetch };
+  return { data: data! as unknown as OSCSettings, status, isFetching, isError, refetch };
 }
 
 export function useOscSettingsMutation() {

apps/client/src/common/hooks-query/useSettings.ts

@@ -6,7 +6,7 @@ import { getSettings } from '../api/ontimeApi';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';
 
 export default function useSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: APP_SETTINGS,
     queryFn: getSettings,
     placeholderData: ontimePlaceholderSettings,
@@ -16,5 +16,5 @@ export default function useSettings() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
+  return { data, status, isFetching, isError, refetch };
 }

apps/client/src/common/hooks-query/useUserFields.ts

@@ -6,7 +6,7 @@ import { getUserFields } from '../api/ontimeApi';
 import { userFieldsPlaceholder } from '../models/UserFields';
 
 export default function useUserFields() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: USERFIELDS,
     queryFn: getUserFields,
     placeholderData: userFieldsPlaceholder,
@@ -16,5 +16,5 @@ export default function useUserFields() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
+  return { data, status, isFetching, isError, refetch };
 }

apps/client/src/common/hooks-query/useViewSettings.ts

@@ -6,7 +6,7 @@ import { getView } from '../api/ontimeApi';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 
 export default function useViewSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: VIEW_SETTINGS,
     queryFn: getView,
     placeholderData: viewsSettingsPlaceholder,
@@ -16,5 +16,5 @@ export default function useViewSettings() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }