Update

resources/js/stores/MediaStore.js

@@ -20,6 +20,11 @@ const useMediaStore = create(
         currentCaption: 'I am chicken rice',
         watermarked: true,
 
+        // Initial values state
+        hasInitialMeme: false,
+        hasInitialBackground: false,
+        hasInitialText: false,
+
         keywords: [],
         isLoadingAIHints: false,
 
@@ -57,6 +62,28 @@ const useMediaStore = create(
             set({ currentCaption: caption });
         },
 
+        // Set initial values from props
+        setInitialMeme: (meme) => {
+            set({ selectedMeme: meme, hasInitialMeme: true });
+        },
+
+        setInitialBackground: (background) => {
+            set({ selectedBackground: background, hasInitialBackground: true });
+        },
+
+        setInitialText: (text) => {
+            set({ currentCaption: text, hasInitialText: true });
+        },
+
+        // Clear initial state to allow fresh initialization
+        clearInitialState: () => {
+            set({ 
+                hasInitialMeme: false, 
+                hasInitialBackground: false, 
+                hasInitialText: false 
+            });
+        },
+
         // Clear selections
         clearSelectedMeme: () => {
             set({ selectedMeme: null });
@@ -107,15 +134,31 @@ const useMediaStore = create(
         },
 
         init: async () => {
+            const state = get();
+            
+            // Skip API call completely if ALL initial values were set via props
+            if (state.hasInitialMeme && state.hasInitialBackground && state.hasInitialText) {
+                return;
+            }
+
             try {
                 const response = await axiosInstance.post(route('api.app.init'));
 
                 if (response?.data?.success?.data?.init) {
-                    set({
-                        currentCaption: response.data.success.data.init.caption,
-                        selectedMeme: response.data.success.data.init.meme,
-                        selectedBackground: response.data.success.data.init.background,
-                    });
+                    const updates = {};
+                    
+                    // Only update values that weren't set via props
+                    if (!state.hasInitialText) {
+                        updates.currentCaption = response.data.success.data.init.caption;
+                    }
+                    if (!state.hasInitialMeme) {
+                        updates.selectedMeme = response.data.success.data.init.meme;
+                    }
+                    if (!state.hasInitialBackground) {
+                        updates.selectedBackground = response.data.success.data.init.background;
+                    }
+                    
+                    set(updates);
                 } else {
                     throw 'Invalid API response';
                 }