Fix hot reload when users update many files "simultaneously"

CHANGELOG.md

@@ -6,6 +6,7 @@ From version 2.6.0, the sections in this file adhere to the [keep a changelog](h
 * [#1807](https://github.com/Shopify/shopify-cli/pull/1807): Fix `--live` parameter, it should not imply `--allow-live` in the `theme push` command
 * [#1812](https://github.com/Shopify/shopify-cli/pull/1812): App creation with Rails 7
 * [#1821](https://github.com/Shopify/shopify-cli/pull/1821): Fix Shopify hosted fonts to load via the local preview URL
+* [#1830](https://github.com/Shopify/shopify-cli/pull/1830): Fix hot reload when users update many files "simultaneously"
 
 ## Version 2.7.2
 ### Fixed

lib/shopify_cli/theme/dev_server/hot-reload.js

@@ -17,19 +17,35 @@
 
   connect();
 
+  function isRefreshRequired(files) {
+    return files.some((file) => !isCssFile(file) && !isSectionFile(file));
+  }
+
+  function refreshFile(file) {
+    if (isCssFile(file)) {
+      reloadCssFile(file);
+      return;
+    }
+
+    if (isSectionFile(file)) {
+      reloadSection(file);
+      return;
+    }
+  }
+
+  function refreshPage() {
+    console.log('[HotReload] Refreshing entire page');
+    window.location.reload();
+  }
+
   function handleUpdate(message) {
     var data = JSON.parse(message.data);
+    var modifiedFiles = data.modified;
 
-    // Assume only one file is modified at a time
-    var modified = data.modified[0];
-
-    if (isCssFile(modified)) {
-      reloadCssFile(modified)
-    } else if (isSectionFile(modified)) {
-      reloadSection(modified);
+    if (isRefreshRequired(modifiedFiles)) {
+      refreshPage();
     } else {
-      console.log(`[HotReload] Refreshing entire page`);
-      window.location.reload();
+      modifiedFiles.forEach(refreshFile);
     }
   }