Maintain order of session updates

src/apps/dashboard/features/sessions/hooks/useLiveSessions.ts

@@ -2,7 +2,7 @@ import type { SessionInfoDto } from '@jellyfin/sdk/lib/generated-client/models/s
 import { SessionMessageType } from '@jellyfin/sdk/lib/generated-client/models/session-message-type';
 import { useApi } from 'hooks/useApi';
 import { ApiClient } from 'jellyfin-apiclient';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import serverNotifications from 'scripts/serverNotifications';
 import Events, { Event } from 'utils/events';
 import { QUERY_KEY, useSessions } from '../api/useSessions';
@@ -18,9 +18,29 @@ const useLiveSessions = () => {
 
     const sessionsQuery = useSessions(params);
 
+    const updateSessions = useCallback((sessions: SessionInfoDto[]) => {
+        const newSessions = filterSessions(sessions);
+        const data = queryClient.getQueryData([ QUERY_KEY, params ]) as SessionInfoDto[];
+        if (data) {
+            const currentSessions = [ ...data ];
+
+            for (const session of newSessions) {
+                const sessionIndex = currentSessions.findIndex((value) => value.DeviceId === session.DeviceId);
+                if (sessionIndex == -1) {
+                    return [ ...currentSessions, session ];
+                };
+                currentSessions[sessionIndex] = session;
+                return currentSessions;
+            }
+            return currentSessions;
+        } else {
+            return newSessions;
+        }
+    }, []);
+
     useEffect(() => {
         const onSessionsUpdate = (evt: Event, apiClient: ApiClient, info: SessionInfoDto[]) => {
-            queryClient.setQueryData([ QUERY_KEY, params ], filterSessions(info));
+            queryClient.setQueryData([ QUERY_KEY, params ], updateSessions(info));
         };
 
         __legacyApiClient__?.sendMessage(SessionMessageType.SessionsStart, '0,1500');