activate css animation

packages/app/src/components/ReactMarkdownComponents/Lsx/Lsx.module.scss

@@ -1,13 +1,19 @@
-.lsx .page-list-ul > li > a:not(:hover) {
-  text-decoration: none;
-}
+.lsx :global {
+  page-list-ul > li > a:not(:hover) {
+    text-decoration: none;
+  }
 
-.lsx .lsx-page-not-exist {
-  opacity: 0.6;
-}
+  .lsx-page-not-exist {
+    opacity: 0.6;
+  }
 
-.lsx .lsx-blink {
-  animation: lsx-fadeIn 1s ease 0s infinite alternate;
+  // workaround
+  // https://stackoverflow.com/a/57667536
+  .lsx-blink {
+    & :local {
+      animation: lsx-fadeIn 1s ease 0s infinite alternate;
+    }
+  }
 }
 
 @keyframes lsx-fadeIn {

packages/app/src/components/ReactMarkdownComponents/Lsx/Lsx.tsx

@@ -242,9 +242,9 @@ export const Lsx = ({
     const showListView = nodeTree != null && (!isLoading || nodeTree.length > 0);
 
     return (
-      <div className={isLoading ? 'lsx-blink' : ''}>
+      <>
         { isLoading && (
-          <div className="text-muted">
+          <div className={`text-muted ${isLoading ? 'lsx-blink' : ''}`}>
             <small>
               <i className="fa fa-spinner fa-pulse mr-1"></i>
               {lsxContext.toString()}
@@ -255,7 +255,7 @@ export const Lsx = ({
         { showListView && (
           <LsxListView nodeTree={nodeTree} lsxContext={lsxContext} basisViewersCount={basisViewersCount} />
         ) }
-      </div>
+      </>
     );
   };