infisical icon indicating copy to clipboard operation
infisical copied to clipboard

Lottie animations doesn't show on the menubar when offline

Open tvtr04 opened this issue 10 months ago • 0 comments

Describe the bug

When using the application offline, the icons on the menubar are not showing (empty) - for example the Secrets Manager / Cert Manager / … / OrgControlls icons (the Support icons does show).

From looking on the UI console it seems that it tries to pull the lottiefile wasm player but I’m on an offline network so the link unpkg.com does not exist.

I already know this issue from different project, you can fix this by adding at the root component (for example App.tsx) the imports:

import {setWasmUrl} from '@lottiefiles/dotlottie-react';
import lottieWasmUrl from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url'

Then in the place you added the imports (e.g. main.tsx before the html root creation or in the app.tsx before the return statement - it doesn't matter where as long as it happens in the root of the application on load) add this statement:

setWasmUrl(lottieWasmUrl);

This will configure the library to use the player from the npm package instead of relying on downloading it from the cdn.

To Reproduce

Disable your internet connection and delete your browser cache. open infisical instance and you can see that in the menubar the icons are not showing.

tvtr04 avatar Mar 07 '25 18:03 tvtr04