B-table data loading very slow

I’m using Laravel and Vue for a project I’m working on. Within my dashboard I’m using BootstrapVue’s datatable named B-table, which receives JSON data from my API.

The API currently only returns 1 user, however it takes quite some time to load it even though it’s just 1 row. I created this GIF to show you it’s loading time when refreshing the webpage:

I’m using Axios to receive data from my API, I’m very curious what’s causing it to be this slow. Here is my code:

<template>
    <div>
        <div id="main-wrapper" class="container">
            <div class="row">
                <div class="col-md-12">
                    <hr>
                    <b-table busy.sync="true" show-empty striped hover responsive :items="users" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage" @refreshed="verfris">
                        <template slot="actions" slot-scope="data">
                            <a class="icon" href="#"><i class="fas fa-eye"></i></a>
                            <a class="icon" href="#"><i class="fas fa-pencil-alt"></i></a>
                            <a class="icon"><i class="fas fa-trash"></i></a>
                        </template>
                    </b-table>
                    <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0 pagination-sm" />
                </div>

            </div>

        </div>
    </div>
</template>
<script>
    export default {

        data() {
            return {
                users: [],
                filter: null,
                currentPage: 1,
                perPage: 10,
                totalRows: null,
                selectedID: null,
                fields: [
                    {
                        key: 'id',
                        sortable: true
                    },
                    {
                        key: 'name',
                        sortable: true
                    },
                    {
                        key: 'email',
                        sortable: true
                    },
                    {
                        key: 'actions'
                    }

                ],
            }
        },
        mounted() {
            this.getResults();
        },
        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults(ctx, callback) {
                axios.get('/api/users')

                    .then(response => {
                        this.users = response.data;
                        this.totalRows = response.data.length;
                        return this.users;
                    });
            }
        },

    }
</script>

And the JSON data my API returns:

[ { "id": 1, "name": "test", "email": "[e-mail]", "email_verified_at": null, "created_at": "2018-09-28 16:04:36", "updated_at": "2018-09-28 16:04:36" } ]

What can I do to solve this loadtime issue? I’m using an Ubuntu server in VirtualBox.

[tmorehouse]

There is also another nifty Vue plugin called vue-async-computed https://github.com/foxbenjaminfox/vue-async-computed (available on NPM as well)

Which allows you to create computed properties that can fetch data.

[sschadwick]

Not sure if this is within your scope of consideration, however Nuxt.js offers an attractive solution.

Nuxt.js creates an asyncData method within components, which allows a promise to be resolved before the component renders. To the end-user, the data appears to always be present in the table (once the page renders).

https://nuxtjs.org/guide/async-data