fix: bug with fetching device list

src/layouts/Header/Header.tsx

@@ -32,17 +32,19 @@ const Header: React.FC = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { session } = useAppSelector((state: RootState) => state.account);
-  const { devices, selectedDevice } = useAppSelector(
+  const { devices, selectedDevice, isFetched } = useAppSelector(
     (state: RootState) => state.device
   );
 
   useEffect(() => {
     dispatch(accountSession());
+  }, [dispatch]);
 
-    if (devices.length === 0) {
+  useEffect(() => {
+    if (!isFetched) {
       dispatch(fetchDevices());
     }
-  }, [dispatch, devices]);
+  }, [dispatch, isFetched]);
 
   const handleOutsideClick = (e: MouseEvent) => {
     if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {

src/stores/slices/deviceSlice.ts

@@ -17,6 +17,7 @@ interface IDeviceState {
   selectedDevice: IDevice | null;
   loadingDevices: boolean;
   errorDevices: string;
+  isFetched: boolean
 }
 
 const initialState: IDeviceState = {
@@ -25,6 +26,7 @@ const initialState: IDeviceState = {
   selectedDevice: null,
   loadingDevices: false,
   errorDevices: "",
+  isFetched: false
 };
 
 export const fetchDevices = createAsyncThunk(
@@ -81,15 +83,18 @@ const deviceSlice = createSlice({
     builder
       .addCase(fetchDevices.pending, (state) => {
         state.loadingDevices = true;
+        state.isFetched = false; 
       })
       .addCase(fetchDevices.fulfilled, (state, action) => {
         state.loadingDevices = false;
         state.devices = action.payload;
         state.selectedDevice = action.payload[0] ?? null;
+        state.isFetched = true; 
       })
       .addCase(fetchDevices.rejected, (state, action) => {
         state.loadingDevices = false;
         state.errorDevices = action.payload as string;
+         state.isFetched = false;
       })
 
       .addCase(fetchDeviceData.fulfilled, (state, action) => {