Pages using shadow endpoints do not render until all data is loaded

Describe the bug

A page using (shadow) endpoints won’t render until the data is returned. This is an issue in cases where for example a database call takes over 10 seconds, and to a user would appear to just be a site failing. This issue refers to using shadow endpoints as described in this solution https://github.com/sveltejs/kit/issues/3532

I made an assumption I could merely use an #await block to display the data but the page will still not render anything until all data loaded for that particular component is returned even if other components are on the page. This may not be an issue if data being returned fast, but if you have a database call that takes > 10 seconds or multiple database calls, then the page will be in that load state until data is loaded. I describe how I made this work here https://github.com/sveltejs/kit/discussions/4456 and hopeful to use this, but soon came to realize this puts a wrench in database calls. While this design may have been to do just that, prevent any loading or flicker, I think an option to enable rendering before data is loaded would make this functionality more flexible.

Additionally, if you have multiple pages open, this cascades into each page waiting to load before it tries to run the query for the next page.

Perhaps there is a better way to do this that someone can point out, it’s not clear to me from the Sveltekit docs.

Reproduction

The flow is the following: queryDatabase.js > data-result.js > data-result.svelte First the js file which calls the database and receives data query-database.js

import oracledb from 'oracledb';
let result
try {
    oracledb.initOracleClient({libDir: 'C:\\oracle\\instant-client\\instantclient_21_3'});
  } catch (err) {
    console.error('Whoops!');
    console.error(err);
    //process.exit(1);
  }

oracledb.outFormat = oracledb.OUT_FORMAT_OBJECT;

const mypw = '**user removed**'
const myuser = '**pw removed**'

export default async function sendOracleResult() {

  let connection;

  try {
    connection = await oracledb.getConnection( {
      user          : myuser,
      password      : mypw,
      connectString : "**ip:port**/**service**"
    });

    result = await connection.execute(
      `SELECT *
       FROM schema_name.settings
       where param_name like '%field%'`,
    );
    console.log(result.rows);
  } catch (err) {
    console.error(err);
  } finally {
    if (connection) {
      try {
        await connection.close();
      } catch (err) {
        console.error(err);
      }
    }
  }
  return result
}

then the shadow endpoint data-result.js will return the body:

import queryDatabase from '$lib/queryDatabase.js'

export async function get() {
    let result = await queryDatabase()
    console.log('result is', result)
    return {
        body:{
            result: JSON.stringify(result),
            }
    };
}
get()

and finally the page that will not render anything until that data is retrieved which is the issue

<script> 
//this file will get data from shadow endpoint
		export let result
</script>

<div class="content">
	<p>{result}</p>
	<pre>this gives data above</pre>
</div>

Logs

No response

System Info

Sveltekit 1.0.0-next.303
Chrome Version 99.0.4844.84 (Official Build) (64-bit)
{
  "name": "db-viewer",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev --port 4000",
    "build": "svelte-kit build ",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview --port 4001",
    "prepare": "svelte-kit sync",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "prettier": "^2.5.1",
    "prettier-plugin-svelte": "^2.5.0",
    "svelte": "^3.44.0"
  },
  "type": "module",
  "dependencies": {
    "dotenv": "^16.0.0",
    "oracledb": "^5.3.0",
    "pg": "^8.7.3"
  }
}

Severity

annoyance

Additional Information

No response

[half-metal]

I see, I put a function in the .js file that connects, queries, and then returns the content in JSON, then a .svelte file with different name to fetch the data from that url since there is no other .svelte file with same name. Thanks, glad I figured that out.

[half-metal]

@mrkishi are you sure about that when doing database calls from Sveltekit? A page and a standalone works fine for API calls, but when attempting to use a module that connects to a db like oracledb or pg, Vite gives an error about process is not defined. You can do two pages, if you are fine that the page will wait to render until the data is loaded, but if you want to render the page that isn’t just a browser loading until the query response is returned, then it seems you need at least 3 files for Sveltekit in your /routes folder. Maybe you can provide an example, because from what I encountered, a page and endpoint will either not render in your browser until all db data responses occur, or give a Vite error using npm run dev.