fix non-react javascript for Vite

services/QuillLMS/app/assets/stylesheets/shared/spinner.scss

@@ -4,9 +4,19 @@
 
   .spinner {
     height: 100px;
+    animation: rotation 2s infinite linear;
       -webkit-animation: rotation 2s infinite linear;
   }
 
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   @-webkit-keyframes rotation {
       from {-webkit-transform: rotate(0deg);}
       to   {-webkit-transform: rotate(359deg);}
@@ -16,6 +26,16 @@
 .assigner-container {
   .assigner {
     -webkit-animation: rotation 2s infinite linear;
+    animation: rotation 2s infinite linear;
+  }
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
 
   @-webkit-keyframes rotation {

services/QuillLMS/app/views/layouts/twenty_seventeen_home.html.erb

@@ -35,6 +35,7 @@
 
     <script defer src="<%= ENV['FONT_AWESOME_KIT_LINK'] %>" crossorigin="anonymous" integrity="sha384-p7JrABPXxZLpj1XoHTzkPyVs8ekVssRFXc4B7XU6Z1c8XVDA7sVPem/lQ9UouxqE"></script>
     <%= render partial: 'typekit' unless Rails.env.test? %>
+    <%= render partial: 'application/lazyload' %>
     <%= vite_typescript_tag((@js_file || 'home'), defer: true, 'crossorigin': 'anonymous') %>
     <%= vite_stylesheet_tag 'home.scss' %>
     <%= vite_stylesheet_tag 'shared.scss' %>

services/QuillLMS/app/views/pages/evidence_tool.erb

@@ -88,7 +88,7 @@
         <%= text_data[:second_attempt][key] %>
       </section>
       <section class="right-side-container">
-        <img alt="screenshot of example first attempt Reading for Evidence activity prompt" class="lazy" id="prompt-screenshot" data-src="https://assets.quill.org/images/evidence/home_page/widget_images/2x/HeroEvidenceWidget_6.webp" />
+        <img alt="screenshot of example first attempt Reading for Evidence activity prompt" class="lazy" id="prompt-screenshot" data-src="https://assets.quill.org/images/evidence/home_page/widget_images/2x/HeroEvidenceWidget_6.webp" src="https://assets.quill.org/images/evidence/home_page/widget_images/2x/HeroEvidenceWidget_6.webp" />
         <img alt="dotted line arrow" id="arrow" class="lazy" loading="lazy" data-src="https://assets.quill.org/images/evidence/home_page/evidence_arrow.svg" src="https://assets.quill.org/images/evidence/home_page/evidence_arrow.svg" />
       </section>
     </section>
@@ -99,7 +99,7 @@
       </section>
       <section class="right-side-container">
         <img alt="screenshot of example first attempt Reading for Evidence activity prompt" class="lazy" id="prompt-screenshot" loading="lazy" data-src="https://assets.quill.org/images/evidence/home_page/widget_images/2x/HeroEvidenceWidget_9.webp" src="https://assets.quill.org/images/evidence/home_page/widget_images/2x/HeroEvidenceWidget_9.webp" />
-        <img alt="dotted line arrow" class="lazy" id="arrow" loading="lazy" data-src="https://assets.quill.org/images/evidence/home_page/evidence_arrow.svg" />
+        <img alt="dotted line arrow" class="lazy" id="arrow" loading="lazy" data-src="https://assets.quill.org/images/evidence/home_page/evidence_arrow.svg" src="https://assets.quill.org/images/evidence/home_page/evidence_arrow.svg" />
       </section>
     </section>
     <section class="attempt">
@@ -114,7 +114,7 @@
   </section>
   <section class="player-container">
     <div class="youtube-container">
-      <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen class="youtube-iframe lazy" frameBorder="0" data-src="https://www.youtube.com/embed/vN3Rd-kJgFI" title="YouTube video player"></iframe>
+      <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen class="youtube-iframe lazy" frameBorder="0" data-src="https://www.youtube.com/embed/vN3Rd-kJgFI" src="https://www.youtube.com/embed/vN3Rd-kJgFI" title="YouTube video player"></iframe>
     </div>
     <p>Students receive instant feedback on the quality of their writing.</p>
   </section>

services/QuillLMS/client/app/bundles/Lessons/utils/socketStore.js

@@ -5,7 +5,7 @@ class SocketStore {
     this.instance = null;
     this.classroomUnitId = null;
     this.tokenUrl = `${process.env.DEFAULT_URL}/api/v1/lessons_tokens`;
-    this.socketsUrl = process.env.LESSONS_WEBSOCKETS_URL;
+    this.socketsUrl = process.env.VITE_LESSONS_WEBSOCKETS_URL;
     this.token = null;
   }
 

services/QuillLMS/client/app/bundles/Shared/components/shared/spinner.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 const spinnerSrc = 'https://assets.quill.org/images/icons/loader_still.svg';
+
 const Spinner = () => (
   <div className="loading-spinner">
     <div className="spinner-container">

services/QuillLMS/client/app/bundles/Shared/styles/spinner.scss

@@ -1,5 +1,6 @@
 .button-loading-spinner-container {
   .button-loading-spinner {
+    animation: rotation 2s infinite linear;
     -webkit-animation: rotation 2s infinite linear;
     height: 16px;
   }
@@ -8,4 +9,13 @@
       from {-webkit-transform: rotate(0deg);}
       to   {-webkit-transform: rotate(359deg);}
   }
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
 }

services/QuillLMS/client/app/entrypoints/shared.ts

@@ -0,0 +1,2 @@
+import '../../../vendor/assets/javascripts/jquery-1.8.2.js'
+import '../../../vendor/assets/javascripts/bootstrap.js'