Is there the way to let us know the loading state using persist?

[ojj1123]

Problem

I'm using Zustand persist middleware with a custom storage adapter that makes async API calls. I want to show loading states during these async operations (like auto-save mode), but I'm struggling with the best approach.

Current Implementation

import { createStore } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

interface StoreState {
  data: any;
}

interface StoreActions {
  setData: (data: any) => void;
}

const storage = createJSONStorage<StoreState>(() => ({
  getItem: async (id) => {
    // Fetch data from API
    const response = await api.getData(id);
    return JSON.stringify(response);
  },
  
  setItem: async (id, value) => {
    // Save data to API
    await api.saveData(id, value);
  },
  
  removeItem: () => {},
}));

const Store = createStore<StoreState & StoreActions>()(
  persist(
    (set, get) => ({
      data: null,
      
      setData: (data: any) => {
        set({ data });
      },
    }),
    {
      storage,
      partialize: (state) => ({
        data: state.data,
      }),
    }
  )
);

Questions

1. What's the recommended pattern for showing loading states during persist operations?

2. Are there any built-in mechanisms in Zustand persist for handling async operation states?

What I've tried

1. using onRehydrateStorage: This only runs when hydrating, not when setting the state, so it doesn't give any meaningful results.

const useBoundStore = create(
  persist(
    (set, get) => ({
      // ...
      isLoading: false,
      setLoading: (state) => {
        set({
          isLoading: state
        });
      }
    }),
    {
      // ...
      onRehydrateStorage: (state) => { // ⬅️
        state.setLoading(true);

        return () => state.setLoading(false);
      }
    }
  )
);

Desired Behavior

// Component usage
const { data, isLoading, setData } = useStore();

const handleSave = async () => {
  setData(newData); // Should show loading during API call
  // isLoading should be true during the setItem async operation
};

Environment

• Zustand: 5.0.4

Looking for best practices or recommended patterns for this scenario.

[dai-shi]

Have you tried onFinishHydration?

[dai-shi]

Right, zustand's set doesn't return anything.

I guess a hacky workaround for your case is to use a different store.

const usePendingStore = create((set) => ({
  pending: false,
}));

const storage = createJSONStorage<StoreState>(() => ({
  getItem: async (id) => {
    // Fetch data from API
    const response = await api.getData(id);
    return JSON.stringify(response);
  },
  
  setItem: async (id, value) => {
    // Save data to API
    usePendingStore.setState({ pending: true });
    try {
      await api.saveData(id, value);
    } finally {
      usePendingStore.setState({ pending: false });
    }
  },
  
  removeItem: () => {},
}));

[ojj1123]

Thanks! i got it. I found it a bit hacky though.
FYI, I've tried to make loading state and data state with the same store, but i encountered the infinite loop:

interface StoreState {
  data: any;
  isLoading: boolean;
}

interface StoreActions {
  setData: (data: any) => void;
  _setLoading: (isLoading: boolean) => void;
}

const storage = createJSONStorage<StoreState>(() => ({
  getItem: async (id) => {
    // Fetch data from API
    const response = await api.getData(id);
    return JSON.stringify(response);
  },
  
  setItem: async (id, value) => {
    Store._setLoading(true); // ⬅️ cause the infinite calling `setItem`
    await api.saveData(id, value);
    Store._setLoading(false);
  },
  
  removeItem: () => {},
}));

const Store = createStore<StoreState & StoreActions>()(
  persist(
    (set, get) => ({
      data: null,
      isLoading: false,
      
      _setLoading: (isLoading: boolean) => {
       set({ isLoading });
      },
      setData: (data: any) => {
        set({ data });
      },
    }),
    {
      storage,
      partialize: (state) => ({
        data: state.data,
      }),
    }
  )
);

[ojj1123]

btw, how do you like supporting the loading state for the async persistant store with zustand?

[dai-shi]

Zustand itself has no notion of loading state or async things. It's just a usage pattern.
What I think is reasonable is for setState to return a promise if persist middleware is used. This is going to be a little challenging for typing. But, should be doable.

[dai-shi]

What I think is reasonable is for setState to return a promise if persist middleware is used. This is going to be a little challenging for typing. But, should be doable.

Here you go: #3206