{"action":"created","issue":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/2145","repository_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue","labels_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/2145/labels{/name}","comments_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/2145/comments","events_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/2145/events","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/2145","id":377962437,"node_id":"MDU6SXNzdWUzNzc5NjI0Mzc=","number":2145,"title":"B-table data loading very slow","user":{"login":"amirakbulut","id":17499511,"node_id":"MDQ6VXNlcjE3NDk5NTEx","avatar_url":"https://avatars0.githubusercontent.com/u/17499511?v=4","gravatar_id":"","url":"https://api.github.com/users/amirakbulut","html_url":"https://github.com/amirakbulut","followers_url":"https://api.github.com/users/amirakbulut/followers","following_url":"https://api.github.com/users/amirakbulut/following{/other_user}","gists_url":"https://api.github.com/users/amirakbulut/gists{/gist_id}","starred_url":"https://api.github.com/users/amirakbulut/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amirakbulut/subscriptions","organizations_url":"https://api.github.com/users/amirakbulut/orgs","repos_url":"https://api.github.com/users/amirakbulut/repos","events_url":"https://api.github.com/users/amirakbulut/events{/privacy}","received_events_url":"https://api.github.com/users/amirakbulut/received_events","type":"User","site_admin":false},"labels":[{"id":682905615,"node_id":"MDU6TGFiZWw2ODI5MDU2MTU=","url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/labels/Status:%20Answered","name":"Status: Answered","color":"7ED321","default":false},{"id":457559541,"node_id":"MDU6TGFiZWw0NTc1NTk1NDE=","url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/labels/Status:%20Help%20Wanted","name":"Status: Help Wanted","color":"128A0C","default":false},{"id":457559543,"node_id":"MDU6TGFiZWw0NTc1NTk1NDM=","url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/labels/Type:%20Question","name":"Type: Question","color":"FF6DD9","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-11-06T17:48:59Z","updated_at":"2018-11-06T19:11:42Z","closed_at":null,"author_association":"NONE","body":"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.\r\n\r\nThe 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:\r\n\r\n\r\n![](https://i.stack.imgur.com/7aj9w.gif)\r\n\r\nI'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:\r\n\r\n```\r\n<template>\r\n    <div>\r\n        <div id=\"main-wrapper\" class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-md-12\">\r\n                    <hr>\r\n                    <b-table busy.sync=\"true\" show-empty striped hover responsive :items=\"users\" :fields=\"fields\" :filter=\"filter\" :current-page=\"currentPage\" :per-page=\"perPage\" @refreshed=\"verfris\">\r\n                        <template slot=\"actions\" slot-scope=\"data\">\r\n                            <a class=\"icon\" href=\"#\"><i class=\"fas fa-eye\"></i></a>\r\n                            <a class=\"icon\" href=\"#\"><i class=\"fas fa-pencil-alt\"></i></a>\r\n                            <a class=\"icon\"><i class=\"fas fa-trash\"></i></a>\r\n                        </template>\r\n                    </b-table>\r\n                    <b-pagination :total-rows=\"totalRows\" :per-page=\"perPage\" v-model=\"currentPage\" class=\"my-0 pagination-sm\" />\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\n    export default {\r\n\r\n        data() {\r\n            return {\r\n                users: [],\r\n                filter: null,\r\n                currentPage: 1,\r\n                perPage: 10,\r\n                totalRows: null,\r\n                selectedID: null,\r\n                fields: [\r\n                    {\r\n                        key: 'id',\r\n                        sortable: true\r\n                    },\r\n                    {\r\n                        key: 'name',\r\n                        sortable: true\r\n                    },\r\n                    {\r\n                        key: 'email',\r\n                        sortable: true\r\n                    },\r\n                    {\r\n                        key: 'actions'\r\n                    }\r\n\r\n                ],\r\n            }\r\n        },\r\n        mounted() {\r\n            this.getResults();\r\n        },\r\n        methods: {\r\n            // Our method to GET results from a Laravel endpoint\r\n            getResults(ctx, callback) {\r\n                axios.get('/api/users')\r\n\r\n                    .then(response => {\r\n                        this.users = response.data;\r\n                        this.totalRows = response.data.length;\r\n                        return this.users;\r\n                    });\r\n            }\r\n        },\r\n\r\n    }\r\n</script>\r\n```\r\n\r\nAnd the JSON data my API returns:\r\n\r\n`\r\n[\r\n    {\r\n        \"id\": 1,\r\n        \"name\": \"test\",\r\n        \"email\": \"user@user.nl\",\r\n        \"email_verified_at\": null,\r\n        \"created_at\": \"2018-09-28 16:04:36\",\r\n        \"updated_at\": \"2018-09-28 16:04:36\"\r\n    }\r\n]\r\n`\r\n\r\nWhat can I do to solve this loadtime issue? I'm using an Ubuntu server in VirtualBox."},"comment":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/comments/436372661","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/2145#issuecomment-436372661","issue_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/2145","id":436372661,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNjM3MjY2MQ==","user":{"login":"amirakbulut","id":17499511,"node_id":"MDQ6VXNlcjE3NDk5NTEx","avatar_url":"https://avatars0.githubusercontent.com/u/17499511?v=4","gravatar_id":"","url":"https://api.github.com/users/amirakbulut","html_url":"https://github.com/amirakbulut","followers_url":"https://api.github.com/users/amirakbulut/followers","following_url":"https://api.github.com/users/amirakbulut/following{/other_user}","gists_url":"https://api.github.com/users/amirakbulut/gists{/gist_id}","starred_url":"https://api.github.com/users/amirakbulut/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amirakbulut/subscriptions","organizations_url":"https://api.github.com/users/amirakbulut/orgs","repos_url":"https://api.github.com/users/amirakbulut/repos","events_url":"https://api.github.com/users/amirakbulut/events{/privacy}","received_events_url":"https://api.github.com/users/amirakbulut/received_events","type":"User","site_admin":false},"created_at":"2018-11-06T19:11:42Z","updated_at":"2018-11-06T19:11:42Z","author_association":"NONE","body":"> Your api endpoint (`/api/users`) took 1.25 seconds to generate the response (TTFB time to first byte)\r\n> \r\n> So you will need to look at the code in your api endpoint. It is not a `b-table` issue.\r\n\r\nI'm not doing anything special in my API code. This is my resource:\r\n\r\n![](https://i.imgur.com/fdzX140.png)\r\n\r\nAnd here is how I return my users:\r\n\r\n![](https://i.imgur.com/AnRWapx.png)\r\n\r\nSomething important, I noticed that when I'm running on localhost using Xampp, the fetching time (Waiting TTFB) is only 200-300ms.\r\n\r\n"}}
{"actor":{"display_login":"amirakbulut"}}