Move the promise into the private part of the module

Moves the promise into the private part of the module
this is so we don't show the module until the data
has been loaded from the server.

Change-Id: Ia770729be44ce0f802d462162132ad09c16e6169
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2367876Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805481}

chrome/browser/resources/new_tab_page/modules/kaleidoscope/BUILD.gn

@@ -6,4 +6,6 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_library("module") {
   deps = [ "..:module_descriptor" ]
+
+  externs_list = [ "externs.js" ]
 }

chrome/browser/resources/new_tab_page/modules/kaleidoscope/externs.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @returns {Promise<?{
+ *    element: !HTMLElement,
+ *    title: string,
+ *   }>}
+ */
+window.loadKaleidoscopeModule = () => {};

chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js

@@ -57,15 +57,11 @@ export const kaleidoscopeDescriptor = new ModuleDescriptor(
     /*id=*/ 'kaleidoscope',
     /*name=*/ loadTimeData.getString('modulesKaleidoscopeName'),
     /*heightPx=*/ 330,
-    () => {
+    async () => {
       // Load all the Kaleidoscope resources into the NTP and return the module
       // once the loading is complete.
-      return Promise.all(KALEIDOSCOPE_RESOURCES.map((r) => loadResource(r)))
-          .then(() => {
-            return {
-              element: document.createElement('ntp-kaleidoscope-module'),
-              title: loadTimeData.getString('modulesKaleidoscopeTitle'),
-            };
-          });
+      await Promise.all(KALEIDOSCOPE_RESOURCES.map((r) => loadResource(r)));
+
+      return window.loadKaleidoscopeModule();
     },
 );