content-loader | ⚪️ SVG component to create placeholder | Animation library

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

It was working fine before I have done nothing, no packages update, no gradle update no nothing just created new build and this error occurs. but for some team members the error occur after gradle sync.

The issue is that build is generating successfully without any error but when opens the app it suddenly gets crash (in both debug and release mode)

Error

I'm new to VueJS, and I'm coming to you to find out if what I've done is feasible or not.

Instead of having old data, while loading components, I prefer to display a preloader. I liked the idea of a skeletons loader, rather than a simple spinner.

Right now I have a state in the store, which is null by default, I have a mutation to set the loading, and a getter. To avoid visual bugs, from the router, with a beforeEach, I initialize the loading state to true, so that by default the components start loading !

Then, in my view, I import the Loader component, with its svg and style. And I place it over the component that needs to be displayed, with a simple condition v-if="!getLoading" and v-if="getLoading".

The problem is that I feel like I'm tinkering with the blind, the beforeach and displaying this component with a condition?

I would be reassured if someone can give me some advice, or approve this method of doing!

Here is the code of a simple Loader component

We have an application (a website) with some React components, css and js compiled with webpack.

Our workflow is to npm run start in the /src/ folder while developing locally, which generates CSS and JS files in /dist/ then run npm run build to clear down refresh all the files in the /dist/ folder before deploying to live. That is the intent, anyway.

The problem is, when we deploy a change to the live environment, it seems the browser still has previous versions of the CSS/JS files cached, or not reading correctly from the new versions. This only happens with the hashed/chunked (React component) files (see ** in file structure below), not the main.js or main.scss file.

We thought webpack produced new 'chunks'/files with each build. Is there a way we can force webpack to do this so the files are read as new when they change, or the filenames are different? I do want the files to be cached by the browser, but I also want new changes to be accounted for.

Example File Structure

I try to do this in svg:

The colors doesn't matters, only the shape.

So I use tool from create-content-loader which provide me svg with animation.

The problem is I can't do the white rect inside the big rect. I unable to change the color - whatever I try.

I try to do to first and second rect:

I want to replace all comma in a div '#tab-content-loader' except the connent in script tag.