Sarguel Posts - Answer Overflow

Sarguel

•Created by Sarguel on 6/9/2023 in #support

Waiting for big component

Hello, I want to wait for a big synchronous component to render while rendering everything else around. After trying:

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

The only solution I could came up with was to wrap it in a component that "make it" async as such:

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

working example: https://playground.solidjs.com/anonymous/0caaf54b-4be7-4013-ae34-e36f73afcbb6 Is there no better way to achieve this goal ?

5 replies

SSolidJS

•Created by Sarguel on 1/18/2023 in #support

class string interpolation with tailwind

Hello, I'm not sure that my issue is relevant to solid or to vite tailwind in general. When using string interpolation to create a css class it does not get imported if the interpolation only concern part of the class name. i.e.

const App: Component = () => {
  const bg1 = "bg-blue-500";
  const bg2 = "green";

  return (
    <>
      <button class={"bg-red-500 text-black font-bold py-2 px-4 rounded"}>
        Hello World
      </button>
      <button class={`${bg1} text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
      <button class={`bg-${bg2}-500 text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
    </>
  );
};

const App: Component = () => {
  const bg1 = "bg-blue-500";
  const bg2 = "green";

  return (
    <>
      <button class={"bg-red-500 text-black font-bold py-2 px-4 rounded"}>
        Hello World
      </button>
      <button class={`${bg1} text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
      <button class={`bg-${bg2}-500 text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
    </>
  );
};

The third button isn't green. Is it expected behaviour ? link to sandbox: https://codesandbox.io/s/withered-tdd-542e6x?file=/src/App.tsx

12 replies

Gaming

Programming