Reduce chance of reload loop for HMR modules

Author: CompuIves

packages/app/src/sandbox/compile.ts

@@ -5,7 +5,9 @@ import parseConfigurations from '@codesandbox/common/lib/templates/configuration
 import initializeErrorTransformers from 'sandbox-hooks/errors/transformers';
 import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
 import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
-import getDefinition, { TemplateType } from '@codesandbox/common/lib/templates/index';
+import getDefinition, {
+  TemplateType,
+} from '@codesandbox/common/lib/templates/index';
 
 import getPreset from './eval';
 import Manager, { Manifest } from './eval/manager';
@@ -647,7 +649,7 @@ async function compile({
       manager.clearCache();
 
       if (firstLoad && changedModuleCount === 0) {
-        deleteAPICache(manager.id);
+        await deleteAPICache(manager.id);
       }
     }
 

packages/app/src/sandbox/eval/cache.ts

@@ -39,6 +39,10 @@ function shouldSaveOnlineCache(firstRun: boolean, changes: number) {
   return false;
 }
 
+export function clearIndexedDBCache() {
+  return localforage.clear();
+}
+
 export async function saveCache(
   sandboxId: string,
   managerModuleToTranspile: any,
@@ -64,7 +68,7 @@ export async function saveCache(
       debug(
         'Saving cache of ' +
           (JSON.stringify(managerState).length / 1024).toFixed(2) +
-          'kb to localStorage'
+          'kb to indexedDB'
       );
     }
     localforage.setItem(manager.id, managerState);
@@ -111,7 +115,7 @@ export async function saveCache(
   return Promise.resolve(false);
 }
 
-export function deleteAPICache(sandboxId: string) {
+export function deleteAPICache(sandboxId: string): Promise<any> {
   if (APICacheUsed) {
     debug('Deleting cache of API');
     return window

packages/app/src/sandbox/eval/manager.ts

@@ -2,7 +2,6 @@
 import { flattenDeep, uniq, values } from 'lodash-es';
 import { Protocol } from 'codesandbox-api';
 import resolve from 'browser-resolve';
-import localforage from 'localforage';
 
 import * as pathUtils from '@codesandbox/common/lib/utils/path';
 import _debug from '@codesandbox/common/lib/utils/debug';
@@ -24,7 +23,7 @@ import TestRunner from './tests/jest-lite';
 import dependenciesToQuery from '../npm/dependencies-to-query';
 import { packageFilter } from './utils/resolve-utils';
 
-import { ignoreNextCache, deleteAPICache } from './cache';
+import { ignoreNextCache, deleteAPICache, clearIndexedDBCache } from './cache';
 import { shouldTranspile } from './transpilers/babel/check';
 import { getGlobal } from '@codesandbox/common/lib/utils/global';
 import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/template';
@@ -1165,12 +1164,12 @@ export default class Manager {
 
   deleteAPICache() {
     ignoreNextCache();
-    deleteAPICache(this.id);
+    return deleteAPICache(this.id);
   }
 
   clearCache() {
     try {
-      localforage.clear();
+      clearIndexedDBCache();
     } catch (ex) {
       if (process.env.NODE_ENV === 'development') {
         console.error(ex);

packages/app/src/sandbox/eval/transpiled-module.ts

@@ -789,10 +789,12 @@ export default class TranspiledModule {
             // We're in a reload loop! Ignore all caches!
 
             manager.clearCache();
-            manager.deleteAPICache();
+            manager.deleteAPICache().then(() => {
+              document.location.reload();
+            });
+          } else {
+            document.location.reload();
           }
-
-          location.reload();
           return {};
         }
       } else if (