Refactor loading vue app

resources/scripts/app/Subnet.vue

@@ -15,32 +15,33 @@ const results = ref( {} );
 /**
  * Load subnet data based on input
  */
-const getSubnetData = () => {
-    // Enable loading icon
-    isLoading.value = true;
+const getSubnetData = async () => {
+    try {
+        // Enable loading state
+        isLoading.value = true;
 
-    // Create post data
-    const postData = new FormData();
-    postData.append( 'subnet', subnet.value );
+        // Prepare request payload
+        const postData = new FormData();
+        postData.append( 'subnet', subnet.value );
 
-    // Send request
-    axios.post( '/api/subnet', postData ).then( (response) => {
+        // Send request and handle response
+        const response = await axios.post( '/api/subnet', postData );
         const { data } = response;
 
-        // Load new block
-        isLoading.value = false;
-        hasResults.value = true;
+        // Update results and UI state
         results.value = data.result;
-    } ).catch( (error) => {
-        isLoading.value = false;
-
-        // Show error message
-        const errorMessage = error.response.data.message || 'Something went wrong.';
+        hasResults.value = true;
+    } catch (error) {
+        // Extract and show error message
+        const errorMessage = error.response?.data?.message || 'Something went wrong.';
         $toast.error(errorMessage, {
             position: 'top',
             duration: 1500,
         });
-    } );
+    } finally {
+        // Reset loading state
+        isLoading.value = false;
+    }
 }
 
 /**

resources/scripts/main.ts

@@ -4,7 +4,7 @@ import ToastPlugin from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-default.css';
 
 // Import components
-import Subnet from '@app/Subnet.vue';
+import Subnet from '@scripts/app/Subnet.vue';
 
 // Initialize vue app
 function initializeApp(element: string, component: any): void {

vite.config.ts

@@ -23,8 +23,7 @@ export default defineConfig({
     resolve: {
         alias: {
             '@styles': path.resolve('resources/styles'),
-            '@scripts': path.resolve('resources/scripts'),
-            '@app': path.resolve('resources/scripts/app')
+            '@scripts': path.resolve('resources/scripts')
         },
     },
     css: {