diff --git a/vue/src/client/models/ModelRunList.ts b/vue/src/client/models/ModelRunList.ts
index 029fde7ed..97f6c364f 100755
--- a/vue/src/client/models/ModelRunList.ts
+++ b/vue/src/client/models/ModelRunList.ts
@@ -11,3 +11,12 @@ export type ModelRunList = {
   bbox: GeoJSON.Polygon | null;
   items: ModelRun[];
 };
+
+export const emptyModelRunList = (): ModelRunList => ({
+  count: 0,
+  next: null,
+  previous: null,
+  timerange: null,
+  bbox: null,
+  items: [],
+});
diff --git a/vue/src/components/ModelRunList.vue b/vue/src/components/ModelRunList.vue
index 2503ea014..01517209b 100755
--- a/vue/src/components/ModelRunList.vue
+++ b/vue/src/components/ModelRunList.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
 import ModelRunCard from "./ModelRunCard.vue";
 import type { ModelRunList } from "../client/models/ModelRunList";
-import { LngLatBounds } from "maplibre-gl";
-import {
-  CancelError,
-  CancelablePromise,
-  ModelRun,
-  QueryArguments,
-} from "../client";
+import type { QueryArguments } from "../client";
 import { computed, onMounted, ref, watch, withDefaults } from "vue";
-import { ApiService } from "../client";
-import { filteredSatelliteTimeList, state, updateCameraBoundsBasedOnModelRunList } from "../store";
+import { filteredSatelliteTimeList, queryModelRuns, refreshModelRunDownloadingStatuses, state, updateCameraBoundsBasedOnModelRunList } from "../store";
 import type { KeyedModelRun } from '../store'
 import { hoveredInfo } from "../interactions/mouseEvents";
 
-// This must match the page_size parameter for the list_model_runs endpoint
-const PAGE_SIZE = 10;
-
 interface Props {
   filters: QueryArguments;
   compact?: boolean
@@ -26,125 +16,19 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "update:timerange", timerange: ModelRun["timerange"]): void;
   (e: "modelrunlist", modelRunList: ModelRunList): void;
 }>();
 
-const resultsBoundingBox = ref({
-  xmin: -180,
-  ymin: -90,
-  xmax: 180,
-  ymax: 90,
-});
-const totalModelRuns = ref(1);
-const loading = ref(false);
+const totalModelRuns = computed(() => state.totalNumModelRuns);
+const loading = computed(() => state.queryStates.loadModelRuns.inflightQueries > 0);
 const satelliteRegionTooLarge = ref(false);
-const page = ref(1);
-
-let request: CancelablePromise<ModelRunList> | undefined;
-
-async function loadModelRuns() {
-  loading.value = true;
-  if (request !== undefined) {
-    request.cancel();
-  }
-  const { mode, performer } = props.filters; // unwrap performer and mode arrays
-  request = ApiService.getModelRuns({
-    page: page.value,
-    ...props.filters,
-    mode,
-    performer,
-    proposal: props.compact ? 'PROPOSAL' : undefined, // if compact we are doing proposal adjudication
-  });
-  try {
-    const modelRunList = await request;
-    request = undefined;
-    loading.value = false;
-    totalModelRuns.value = modelRunList.count;
 
-    // sort list to show ground truth near the top
-    const modelRunResults = modelRunList.items;
-    const keyedModelRunResults = modelRunResults.map((val) => {
-      return {
-        ...val,
-        key: `${val.id}`,
-      };
-    });
-
-    // If a bounding box was provided for this model run list, zoom the camera to it.
-    if (modelRunList.bbox) {
-      const bounds = new LngLatBounds();
-      modelRunList.bbox.coordinates
-        .flat()
-        .forEach((c) => bounds.extend(c as [number, number]));
-      const bbox = {
-        xmin: bounds.getWest(),
-        ymin: bounds.getSouth(),
-        xmax: bounds.getEast(),
-        ymax: bounds.getNorth(),
-      };
-      resultsBoundingBox.value = bbox;
-      state.bbox = bbox;
-    } else if (!state.filters.regions?.length) {
-      const bbox = {
-        xmin: -180,
-        ymin: -90,
-        xmax: 180,
-        ymax: 90,
-      };
-      state.bbox = bbox;
-    }
-
-    // If we're on page 1, we *might* have switched to a different filter/grouping in the UI,
-    // meaning we would need to clear out any existing results.
-    // To account for this, just set the array to the results directly instead of concatenating.
-    if (page.value === 1) {
-      state.modelRuns = keyedModelRunResults;
-    } else {
-      state.modelRuns = state.modelRuns.concat(keyedModelRunResults);
-    }
-    emit("update:timerange", modelRunList["timerange"]);
-    emit("modelrunlist", modelRunList);
-  } catch (e) {
-    if (e instanceof CancelError) {
-      console.log('Request has been cancelled');
-    } else {
-      throw e;
-    }
-  }
+async function loadModelRuns(type: 'firstPage' | 'nextPage') {
+  const modelRunList = await queryModelRuns(type, props.filters, props.compact);
+  emit('modelrunlist', modelRunList);
 }
 
-// Used to update downloading status after an image download has been started.
-const checkDownloading = async () => {
-  if (request !== undefined) {
-    console.log('Cancelling request');
-    request.cancel();
-  }
-  const { mode, performer } = props.filters; // unwrap performer and mode arrays
-  request = ApiService.getModelRuns({
-    page: page.value,
-    ...props.filters,
-    mode,
-    performer,
-    proposal: props.compact ? 'PROPOSAL' : undefined, // if compact we are doing proposal adjudication
-  });
-    const modelRunList = await request;
-    request = undefined;
-    // sort list to show ground truth near the top
-    const modelRunResults = modelRunList.items;
-
-    for (let i = 0; i< state.modelRuns.length; i += 1) {
-      const currentModelRun = state.modelRuns[i];
-      const found = modelRunResults.find((item) => item.id === currentModelRun.id);
-      if (found) {
-        if (found.downloading) {
-          state.modelRuns[i].downloading = found.downloading;
-        }
-      }
-    }
-};
-
-watch(() => state.downloadingCheck, () => checkDownloading());
+watch(() => state.downloadingCheck, () => refreshModelRunDownloadingStatuses());
 
 const loadingSatelliteTimestamps = ref(false);
 
@@ -201,27 +85,23 @@ async function handleScroll(event: Event) {
   // If the user has scrolled to the bottom of the list AND there are still more model runs to
   // fetch, bump the current page to trigger the loadMore function via a watcher.
   const heightPosCheck = Math.floor(target.scrollHeight - target.scrollTop) <= target.clientHeight;
-  if (!loading.value && heightPosCheck && state.modelRuns.length < totalModelRuns.value) {
-    if (page.value !== undefined && Math.ceil(totalModelRuns.value / PAGE_SIZE) > page.value ) {
-      page.value += 1;
-      loadModelRuns();
-    }
+  if (!loading.value && heightPosCheck) {
+    loadModelRuns('nextPage');
   }
 }
 
 const hasSatelliteImages = computed(() => filteredSatelliteTimeList.value.length);
 
 watch([() => props.filters.region, () => props.filters.performer, () => props.filters.eval], () => {
-  page.value = 1;
   state.openedModelRuns.clear();
   state.filters = {
     ...state.filters,
     configuration_id: [],
   };
-  loadModelRuns();
+  loadModelRuns('firstPage');
 });
 
-onMounted(() => loadModelRuns());
+onMounted(() => loadModelRuns('firstPage'));
 </script>
 
 <template>
diff --git a/vue/src/components/SideBar.vue b/vue/src/components/SideBar.vue
index f9b620b75..973088367 100644
--- a/vue/src/components/SideBar.vue
+++ b/vue/src/components/SideBar.vue
@@ -335,14 +335,6 @@ const satelliteLoadingColor = computed(() => {
         v-if="!expandSettings"
         :filters="queryFilters"
         class="flex-grow-1"
-        @update:timerange="
-          (timerange) => {
-            if (timerange !== null) {
-              timemin = timerange.min;
-              state.timeMin = timemin;
-            }
-          }
-        "
         @modelrunlist="currentModelRunList = $event"
       />
     </v-row>
diff --git a/vue/src/components/annotationViewer/SideBar.vue b/vue/src/components/annotationViewer/SideBar.vue
index e75617098..79fcc0106 100644
--- a/vue/src/components/annotationViewer/SideBar.vue
+++ b/vue/src/components/annotationViewer/SideBar.vue
@@ -263,14 +263,6 @@ const satelliteLoadingColor = computed(() => {
         class="flex-grow-1"
         compact
         @modelrunlist="currentModelRunList = $event"
-        @update:timerange="
-          (timerange) => {
-            if (timerange !== null) {
-              timemin = timerange.min;
-              state.timeMin = timemin;
-            }
-          }
-        "
       />
     </v-row>
     <v-dialog
diff --git a/vue/src/store.ts b/vue/src/store.ts
index 3770a4079..f47b25497 100644
--- a/vue/src/store.ts
+++ b/vue/src/store.ts
@@ -1,10 +1,11 @@
 import { computed, reactive } from "vue";
 
-import { ApiService, ModelRun, Performer, Region } from "./client";
+import { ApiService, CancelError, CancelablePromise, ModelRun, ModelRunList, Performer, QueryArguments, Region } from "./client";
 import { EditGeoJSONType } from "./interactions/editGeoJSON";
 import { BaseBBox, EvaluationImage } from "./types";
 import { LngLatBounds } from "maplibre-gl";
 import { RegionDetail } from "./client/models/Region";
+import { emptyModelRunList } from "./client/models/ModelRunList";
 
 export interface MapFilters {
   configuration_id?: string[];
@@ -178,7 +179,8 @@ export const state = reactive<{
   loopingInterval: NodeJS.Timeout | null,
   loopingId: string | null,
   modelRuns: KeyedModelRun[],
-  openedModelRuns: Set<KeyedModelRun["key"]>
+  totalNumModelRuns: number;
+  openedModelRuns: Set<KeyedModelRun["key"]>;
   gifSettings: { fps: number, quality: number, pointSize: number},
   performerMapping: Record<number, Performer>,
   proposals: {
@@ -205,11 +207,20 @@ export const state = reactive<{
   regionList: RegionDetail[];
   // Downloading Check - used to indicate to the modelRunList to check for downloading images
   downloadingCheck: number;
+  // Query states - stores states for network queries
+  queryStates: {
+    loadModelRuns: {
+      request: CancelablePromise<ModelRunList> | undefined;
+      inflightQueries: number;
+      nextPage: number;
+      activeFilters: QueryArguments;
+    };
+  };
 }>({
   appVersion: '',
   errorText: '',
   timestamp: Math.floor(Date.now() / 1000),
-  timeMin: new Date(0).valueOf(),
+  timeMin: Math.floor(new Date(0).valueOf() / 1000),
   settings: {
     autoZoom: false,
   },
@@ -254,6 +265,7 @@ export const state = reactive<{
   loopingInterval: null,
   loopingId: null,
   modelRuns: [],
+  totalNumModelRuns: 0,
   openedModelRuns: new Set<KeyedModelRun["key"]>(),
   gifSettings: { fps: 1, quality: 1, pointSize: 1},
   performerMapping: {},
@@ -281,6 +293,14 @@ export const state = reactive<{
   regionMap: {},
   regionList: [],
   downloadingCheck: 0,
+  queryStates: {
+    loadModelRuns: {
+      inflightQueries: 0,
+      request: undefined,
+      nextPage: 1,
+      activeFilters: {},
+    },
+  },
 });
 
 export const filteredSatelliteTimeList = computed(() => {
@@ -442,7 +462,7 @@ function updateCameraBoundsBasedOnModelRunList(filtered = true, force = false) {
     );
   }
   if (
-    !force && 
+    !force &&
     !state.settings.autoZoom &&
     state.filters.regions &&
     state.filters.regions?.length > 0
@@ -490,7 +510,7 @@ const updateRegionList = async () => {
     }
     // If both have owners or both do not, sort by name
     return a.name.localeCompare(b.name);
-  });  
+  });
   state.regionList = regionResults;
 }
 
@@ -502,11 +522,180 @@ const updateRegionMap = async () => {
   state.regionMap = tempRegionMap;
 }
 
+/**
+ * Loads a page of model runs.
+ *
+ * Next page information is only saved when the request completes.
+ * Therefore, request nextPage while firstPage is inflight will cancel
+ * the firstPage request.
+ *
+ * @param type "firstPage" or "nextPage"
+ * @param filters query filters
+ * @param compact
+ * @returns
+ */
+async function queryModelRuns(type: 'firstPage' | 'nextPage', filters: QueryArguments, compact  = false): Promise<ModelRunList> {
+  const queryState = state.queryStates.loadModelRuns;
+
+  queryState.request?.cancel();
+  queryState.request = undefined;
+
+  if (type !== 'firstPage' && state.modelRuns.length === state.totalNumModelRuns) {
+    return emptyModelRunList();
+  }
+
+  let page = 0;
+  if (type === 'firstPage') {
+    page = 1;
+  } else if (type === 'nextPage') {
+    page = queryState.nextPage;
+  } else {
+    throw new Error('Invalid call to loadModelRuns');
+  }
+
+  const { mode, performer } = filters; // unwrap performer and mode arrays
+  queryState.activeFilters = {
+    ...filters,
+    mode,
+    performer,
+    proposal: compact ? 'PROPOSAL' : undefined, // if compact we are doing proposal adjudication
+  };
+  queryState.request = ApiService.getModelRuns({
+    ...queryState.activeFilters,
+    page,
+  });
+  try {
+    queryState.inflightQueries++;
+    const modelRunList = await queryState.request;
+    queryState.request = undefined;
+    state.totalNumModelRuns = modelRunList.count;
+    queryState.nextPage = page + 1;
+
+    // sort list to show ground truth near the top
+    const modelRunResults = modelRunList.items;
+    const keyedModelRunResults = modelRunResults.map((val) => {
+      return {
+        ...val,
+        key: `${val.id}`,
+      };
+    });
+
+    // If a bounding box was provided for this model run list, zoom the camera to it.
+    if (modelRunList.bbox) {
+      const bounds = new LngLatBounds();
+      modelRunList.bbox.coordinates
+        .flat()
+        .forEach((c) => bounds.extend(c as [number, number]));
+      const bbox = {
+        xmin: bounds.getWest(),
+        ymin: bounds.getSouth(),
+        xmax: bounds.getEast(),
+        ymax: bounds.getNorth(),
+      };
+      state.bbox = bbox;
+    } else if (!state.filters.regions?.length) {
+      const bbox = {
+        xmin: -180,
+        ymin: -90,
+        xmax: 180,
+        ymax: 90,
+      };
+      state.bbox = bbox;
+    }
+
+    // If we're on page 1, we *might* have switched to a different filter/grouping in the UI,
+    // meaning we would need to clear out any existing results.
+    // To account for this, just set the array to the results directly instead of concatenating.
+    if (page === 1) {
+      state.modelRuns = keyedModelRunResults;
+    } else {
+      state.modelRuns = state.modelRuns.concat(keyedModelRunResults);
+    }
+
+    if (modelRunList['timerange'] !== null) {
+      state.timeMin = modelRunList['timerange'].min;
+    }
+
+    return modelRunList;
+  } catch (e) {
+    if (e instanceof CancelError) {
+      console.log('Request has been cancelled');
+    } else {
+      throw e;
+    }
+  } finally {
+    queryState.inflightQueries--;
+  }
+
+  return emptyModelRunList();
+}
+
+/**
+ * Refreshes the downloading state for the queried model runs.
+ *
+ * This will paginate the model run listing endpoint until all loaded
+ * pages are satisfied.
+ *
+ * - Only operates on the loaded pages at the time of invocation.
+ * - If an existing request is inflight, this will chain onto the
+ *   existing request (a CancelablePromise).
+ * - If cancelled, the entire chain is cancelled.
+ */
+const refreshModelRunDownloadingStatuses = async () => {
+  const queryState = state.queryStates.loadModelRuns;
+  const loadedPages = queryState.nextPage - 1;
+  const activeFilters = queryState.activeFilters;
+
+  let existingRequest = queryState.request as CancelablePromise<void> | undefined;
+
+  // chain cancelable requests
+  for (let page = 0; page < loadedPages; page++) {
+    const prevReq = existingRequest;
+    existingRequest = new CancelablePromise(async (resolve, reject, onCancel) => {
+      let apiCallRequest: CancelablePromise<ModelRunList> | undefined;
+
+      onCancel(() => {
+        prevReq?.cancel();
+        apiCallRequest?.cancel();
+      });
+
+      try {
+        await prevReq;
+
+        apiCallRequest = ApiService.getModelRuns({
+          ...activeFilters,
+          page,
+        });
+        const modelRunList = await apiCallRequest;
+
+        const modelRuns = modelRunList.items;
+        // NOTE this is inefficient if modelRuns.length is large and/or
+        // if the page size is large. Practically, this shouldn't be an issue.
+        // A better solution here is to use a lookup table (id -> modelRun).
+        for (let i = 0; i < state.modelRuns.length; i += 1) {
+          const currentModelRun = state.modelRuns[i];
+          const found = modelRuns.find((item) => item.id === currentModelRun.id);
+          if (found) {
+            if (found.downloading) {
+              state.modelRuns[i].downloading = found.downloading;
+            }
+          }
+        }
+      } catch (err) {
+        if (!(err instanceof CancelError)) reject(err);
+      }
+
+      resolve();
+    });
+  }
+};
 
 export {
   loadAndToggleSatelliteImages,
   updateCameraBoundsBasedOnModelRunList,
   updateRegionList,
   updateRegionMap,
+  queryModelRuns,
+  refreshModelRunDownloadingStatuses,
 }