Make the loading content text better and much less hacky, also revert ExtensionMetadata type name back from IExtensionMetadata.

src/components/ProxyRegistrar.astro

@@ -51,7 +51,9 @@
     return window.__uv$config.decodeUrl(frame.contentWindow!.location.href.split("/service/")[1]);
   }
 
-  async function loadContent(): Promise<void> {
+  async function loadProxyContent(): Promise<void> {
+    const loadingContent = document.getElementById("loading-content") as HTMLElement;
+    if (loadingContent) loadingContent.style.opacity = "1";
     await initTransport();
     // The setTimeout is because service workers are a little silly and can take a while longer to register despite .then being called, which causes a bug on the first load.
     setTimeout(async () => {
@@ -80,8 +82,7 @@
           return;
         }
       }
-      const loadingContent = document.getElementById("loading-content") as HTMLElement;
-      if (loadingContent) loadingContent.style.opacity = "1";
+
 
       const iframe = document.getElementById("proxy-frame") as HTMLIFrameElement;
       const topbar = document.getElementById("top-bar") as HTMLDivElement;
@@ -173,11 +174,9 @@
     event.preventDefault();
     event.stopImmediatePropagation();
     await TransportMgr.updateTransport();
-    setTimeout(() => {
-      loadContent();
-    }, 200);
+    loadProxyContent();
   }
-  window.loadFormContent = loadContent;
+  window.loadFormContent = loadProxyContent;
 
   function isUrl(val = "") {
     if (/^http(s?):\/\//.test(val) || (val.includes(".") && val.substr(0, 1) !== " ")) return true;

src/components/ThemeLoader.astro

@@ -17,7 +17,7 @@
     store.getAll().onsuccess = (event) => {
       const result = (event.target as IDBRequest).result;
       if (result) {
-        result.forEach((extension: IExtensionMetadata) => {
+        result.forEach((extension: ExtensionMetadata) => {
           if (extension.type === "theme" && extension.themeName) {
             // Load theme CSS
             loadStyleFromAtob(atob(extension.scriptCopy!));

src/components/ts/marketplace.ts

@@ -77,7 +77,7 @@ Array.from(installButtons).forEach((btn) => {
   });
 });
 
-async function getMarketplaceObj(slug: string): Promise<IExtensionMetadata> {
+async function getMarketplaceObj(slug: string): Promise<ExtensionMetadata> {
   const manifest = extManifest[slug];
   if (manifest.type === "page") {
     return manifest;
@@ -87,7 +87,7 @@ async function getMarketplaceObj(slug: string): Promise<IExtensionMetadata> {
   return manifest;
 }
 
-async function installExtension(ext: IExtensionMetadata, slug: string): Promise<InstallReturn> {
+async function installExtension(ext: ExtensionMetadata, slug: string): Promise<InstallReturn> {
   return new Promise<InstallReturn>((resolve, reject) => {
     const request = IDBManager.GetIDB();
     const transaction = request.transaction("InstalledExtensions", "readwrite");

src/layouts/Layout.astro

@@ -182,6 +182,7 @@ const { title, optionalPreloads } = Astro.props;
         text-align: center;
         font-weight: 400;
         font-size: 2.5rem;
+        margin-bottom: 0;
       }
       .title-desc {
         color: var(--text-color);

src/pages/[lang]/index.astro

@@ -18,9 +18,9 @@ export function getStaticPaths() {
     <section id="proxy-input">
       <div class="form-wrapper">
         <form class="url-input-form" id="url-input-form">
+          <div id="loading-content">Loading Content...</div>
           <Input className="url-input" inputName="url" placeholder={t("menu.search")} defaultStyles={false} transition:persist autocomplete="off" />
           <div id="search-suggestions"></div>
-          <div id="loading-content">Loading...</div>
         </form>
         <div id="top-bar">
           <div class="top-bar-left">
@@ -78,9 +78,7 @@ export function getStaticPaths() {
       searchSuggestions.innerHTML = "";
       data.map((suggestion: Suggestion) => {
         const suggestionElement = document.createElement("div");
-        // For some reason css classes weren't working T^T.
-        suggestionElement.style.cursor = "pointer";
-        suggestionElement.style.marginTop = "5px";
+        suggestionElement.classList.add("search-suggestion");
         suggestionElement.innerText = suggestion.phrase;
         suggestionElement.addEventListener("click", async () => {
           urlInput.value = suggestion.phrase;
@@ -160,21 +158,28 @@ export function getStaticPaths() {
     border-bottom-right-radius: 15px;
     transition: 250ms ease-in-out;
     opacity: 0;
-    height: 240px;
     overflow: hidden;
     border: 3px solid var(--text-color);
     box-shadow: 10px 10px 20px var(--dropdown-background-color);
   }
 
+  .search-suggestion {
+    cursor: pointer;
+    margin-top: 5px;
+  }
+
+  .search-suggestion:last-child {
+    margin-bottom: 10px;
+  }
+
   #loading-content {
     color: var(--text-color);
     padding: 8px;
     position: relative;
-    /* hack */
-    top: -325px;
     opacity: 0;
-    transition: 250ms ease-in-out;
+    transition: .25s ease-in-out;
     text-align: center;
+    font-size: 20px;
   }
 
   .faq-title {

src/pages/[lang]/marketplace.astro

@@ -16,7 +16,7 @@ export const getStaticPaths = () => {
     <div class="marketplace-ext-grid">
       {
         Object.keys(marketplace).map((mp_item) => {
-          const item = (marketplace as { [key: string]: IExtensionMetadata })[mp_item];
+          const item = (marketplace as ExtensionMetadataJSON)[mp_item];
           const slug = mp_item;
           return (
             <div class="marketplace-item" data-slug={slug}>

src/types.d.ts

@@ -32,7 +32,7 @@ type Extension = {
   - type: The type of extension, see ExtType.
   - themeName: The name of the theme that goes in the data attribute
 */
-interface IExtensionMetadata {
+interface ExtensionMetadata {
   title: string;
   description: string;
   version: string;
@@ -46,7 +46,7 @@ interface IExtensionMetadata {
   themeName?: string;
 }
 
-type ExtensionMetadataJSON = Record<string, IExtensionMetadata>;
+type ExtensionMetadataJSON = Record<string, ExtensionMetadata>;
 
 type InstallReturn = {
   code: EXT_RETURN;