my code is

    const testSource = new VectorSource({
      loader: () => {
        const start2 = { x: 43.449928, y: 39.956589 };
        const end2 = { x: 55.606186, y: 49.278728 };

        const generator = new arc.GreatCircle(start2, end2);


        const line = generator.Arc(100, { offset: 10 });
        const features = [];
        line.geometries.forEach((geometry) => {
          const line = new LineString(geometry.coords);
          line.transform('EPSG:4326', 'EPSG:3857');
          const style = new Style({
            stroke: new Stroke({
              color: '#EAE911',
              width: 2,
            }),
          });

          features.push(new Feature({ geometry: line }));

          features.forEach((feature) => {
            feature.setStyle(style);
            testSource.addFeature(feature);
          });
        });
      },
    });

    const vectorLineLayer = new VectorLayer({
      className: 'drawing-layer',
      source: testSource,
    });
    mapReference.addLayer(vectorLineLayer);

I can see that the source exists inside my layer but it will not draw no matter what I do, any ideas? It's not a zIndex issue because I have my vectorLayer CSS set zIndex.

EDIT 5/2/2022 turns out this line was giving me issues,

line.transform('EPSG:4326', 'EPSG:3857');

it was somehow turning my flat coordinates into insane lat/lon. deleting it now shows my curved lines