lemonad Comments - Answer Overflow

lemonad

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

Adding that MainRoutes is just returning a list of Routes:

    <>
      <Route
        path="..."

    <>
      <Route
        path="..."

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

@andi Just wanted to get back to you with an update. I have managed to progress quite a bit, only thing I haven't managed is to split out vendor stuff for the main chunk (which is now > 1MB). Something I would like to do as that changes rarely compared to the application code. These are some of the things I did: I removed all code splitting from the vite config (manualChunks, splitVendorChunkPlugin) as that was putting things in my index.html to be immediately loaded. I made some changes to index.html such as adding basic styling for the body and a div showing "Loading..." which is hidden once the solid app loads. This is pretty much only shown if the network is super slow. In my index.tsx, I lazy load App and then use

  render(
    () => (
      <Show when={App}>
        <Router>
          <App />
        </Router>
      </Show>
    ),
    document.getElementById("app") as HTMLElement,
  );

  render(
    () => (
      <Show when={App}>
        <Router>
          <App />
        </Router>
      </Show>
    ),
    document.getElementById("app") as HTMLElement,
  );

I don't really remember why I set it up this way but I think it was to make the initial chunk to load as small as possible. In App, I lazy load my main routes and then use

            <Routes>
              <Route
                path="/"
                element={<Hello mainRoutesLoaded={mainRoutesLoaded()} />}
              />
              <MainRoutes
                setMainRoutesLoaded={setMainRoutesLoaded}
              />
            </Routes>

            <Routes>
              <Route
                path="/"
                element={<Hello mainRoutesLoaded={mainRoutesLoaded()} />}
              />
              <MainRoutes
                setMainRoutesLoaded={setMainRoutesLoaded}
              />
            </Routes>

The first thing I do in MainRoutes is set the signal mainRoutesLoaded so that I can progress to the main app from the Hello loading screen. Thanks for the help on the way!

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

Another problem is that as soon as I put something in manualChunks, it is added to index.html as a separate download. Perhaps that easy to fix though as using lazy doesn't do it.

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

frontend build: ../dist/assets/Hello-ef0d64f9.js            2.71 kB │ gzip:   1.43 kB │ map:     9.75 kB
frontend build: ../dist/assets/App-01dc259b.js            355.24 kB │ gzip:  91.67 kB │ map: 1,224.62 kB

frontend build: ../dist/assets/Hello-ef0d64f9.js            2.71 kB │ gzip:   1.43 kB │ map:     9.75 kB
frontend build: ../dist/assets/App-01dc259b.js            355.24 kB │ gzip:  91.67 kB │ map: 1,224.62 kB

Ah, it's actually more that I need to figure out how to async import all the other stuff so that the App routing + Hello page does not depend on all other components.

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

The vendor chunk is unfortunately 400kb compressed (1.1Mb uncompressed) due to Plotly 😄

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

(I'm using the splitVendorChunkPlugin vite plugin)

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

Ah, didn't think about imports being promises. I tried some stuff now but I have to figure out how to create a minimal chunk for the routing as well as a minimal chunk for the initial page that doesn't depend on the entire vendor chunk.

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

Just splitting it into chunks will not help, I believe, as then both chunks will still be loaded by the main page. I'll try though.

14 replies

SSolidJS

•Created by lemonad on 10/31/2023 in #support

Loading screen for app

@andi Thanks so much for the tip! I'm actually already using manualChunks already but the problem I don't know how to solve with separating it into two chunks like I think you suggest is that I don't know how to lazy load (or similar) the entire second, major chunk. I don't want to lazy load each component separately because then parts of the app might become unavailable when offline.

14 replies

SSolidJS

•Created by lemonad on 3/8/2023 in #support

createStore array containing arrays

Thanks @mdynnl, just confirming it should work made me solve it. I was setting the values properly but I had a For that was misrepresented above, it was actually more like <For each={item.nested}> {(item2) => { ... const currentClass = props.classes.find((x) => x.name === item2.data.classification.class); ... return <li>...</li>; where item2.data.classification.class was what I updated. Not sure if it was the find that broke reactivity or something else there.

8 replies

Gaming

Programming