Filter objects UI

src/state/network/actions.js

@@ -18,14 +18,23 @@ export function makeApiRequest(requestId, root, endpoint, options = {}) {
     const api = new APIClient(root, accessToken);
     const request = getRequest(state, requestId);
 
+    // A "stealth API request" is one that doesn't update the state.
+    // This is useful when you generally "don't care" about the *state* of the request.
+    const stealth = options.stealth || false;
+    if (stealth) {
+      // Doing it this way because JavaScript doesn't have a `obj.pop(key, default)`
+      delete options.stealth;
+    }
+
     if (request.inProgress) {
       return true;
     }
 
-    dispatch({
-      type: REQUEST_SEND,
-      requestId,
-    });
+    !stealth &&
+      dispatch({
+        type: REQUEST_SEND,
+        requestId,
+      });
 
     let data;
 

src/state/recipes/actions.js

@@ -154,11 +154,16 @@ export function fetchRecipeFilters() {
         filters: JSON.parse(localFilters),
       });
     }
-    // XXX If we already had the filters in localStorage, can we avoid using this
-    // makeNormandyApiRequest() with an ID so that it doesn't cause any spinners to appear
-    // when the localStorage version almost definitely is good enough.
+
+    const options = {};
+    // If we already had the filters in localStorage, we can make a "stealth API request"
+    // which is the same as a regular request except it doesn't update the global state
+    // that there's a request we're waiting for.
+    if (localFilters) {
+      options.stealth = true;
+    }
     const requestId = 'fetch-recipe-filters';
-    const filters = await dispatch(makeNormandyApiRequest(requestId, 'v3/filters/'));
+    const filters = await dispatch(makeNormandyApiRequest(requestId, 'v3/filters/', options));
     // After it has been retrieved remotely, it's very possible that the lists
     // haven't changed. If it hasn't changed compared to what we had in local Storage, then
     // don't bother dispatching again.