feat: search component and loading splashscreen

spa/src/main.js

@@ -15,6 +15,7 @@ import {injectYaMetrika} from "@/utils/yaMetrika.js";
 import { register } from 'swiper/element/bundle';
 import 'swiper/element/bundle';
 import 'swiper/css/bundle';
+import AppLoading from "@/AppLoading.vue";
 register();
 
 const pinia = createPinia();
@@ -26,6 +27,9 @@ app
 
 const settings = useSettingsStore();
 
+const appLoading = createApp(AppLoading);
+appLoading.mount('#app');
+
 settings.load()
     .then(() => {
         if (settings.app_enabled === false) {
@@ -33,6 +37,7 @@ settings.load()
         }
     })
     .then(() => {
+        console.log('Set theme attributes');
         document.documentElement.setAttribute('data-theme', settings.theme[window.Telegram.WebApp.colorScheme]);
         if (settings.night_auto) {
             window.Telegram.WebApp.onEvent('themeChanged', function () {
@@ -41,12 +46,13 @@ settings.load()
         }
     })
     .then(() => {
+        console.log('Load front page categories and products.');
         const categoriesStore = useCategoriesStore();
         categoriesStore.fetchTopCategories();
         categoriesStore.fetchCategories();
     })
     .then(() => new AppMetaInitializer(settings).init())
-    .then(() => app.mount('#app'))
+    .then(() => { appLoading.unmount(); app.mount('#app'); })
     .then(() => window.Telegram.WebApp.ready())
     .then(() => settings.ya_metrika_enabled && injectYaMetrika())
     .catch(error => {