How to avoid temporary undefined values in template literals in solid-meta?

In the browser the whole string gets displayed, but the

data.name

data.name

data.name

data.name is undefined momentarily until the async data resolves.

So the tab title goes from

This -> undefined <- is undefined temporarily

This -> undefined <- is undefined temporarily

This -> undefined <- is undefined temporarily

This -> undefined <- is undefined temporarily to

This -> hello world <- is undefined temporarily

This -> hello world <- is undefined temporarily

This -> hello world <- is undefined temporarily

This -> hello world <- is undefined temporarily. My intended behavior is that the title should not be displayed at all (or the hostname should be display) until everything in the string literal has resolved.

Is there a way to not display the string at all until the data is resolved? Alternatively, is the below code correct - should I be using accessors / derived signals or should be just be using straight string literals (I found this to not be reactive)?

I tried wrapping the meta tags with Suspense and I also tried wrapping them with <Show when={data()} /> but to no avail.

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

Some search engine webmasters tool started to see some undefined values in my strings, so I believe this is not the ideal behavior when it comes to meta tags.

How to avoid temporary undefined values in template literals in solid-meta?

Similar Threads

Similar Threads

Similar Threads